VUE
VUE中使用很多,很常用的方法,但是缺在用的時候不會寫,各種翻代碼,這裏給大家整理一些我遇到的,有用的小知識點,後期有的還會繼續更新。
監聽
監聽路由,數據變化等是常用的監聽方式,話不多說,上代碼:
watch: {
// 1、路由監聽,適用於同一個頁面參數不同時,不需要重新打開頁面,監聽地址的參數不同就可重新加載數據
$route () {
if (this.$route.query.id === 2) {
this.state = true
}else if (this.$route.query.id === 1){
this.state = false
}
//加載數據
this.findInteger()
},
//2、監聽某個對象值發生變化
state () {
//加載數據
this.findInteger()
}
注意方法1和方法2不要同時使用,否則會陷入死循環。。。。
}
日期
1、js中日期控制顯示樣式
export function formatDate (date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''
fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str))
}
}
return fmt
}
function padLeftZero (str) {
return ('00' + str).substr(str.length)
}
說明 | 顯示 | js代碼 |
---|---|---|
年-月-日 | 2020-03-01 | formatDate(new Date(), ‘yyyy-MM-dd’) |
年.月.日 | 2020.03.01 | formatDate(new Date(), ‘yyyy.MM.dd’) |
年/月/日 | 2020/03/31 | formatDate(new Date(), ‘yyyy/MM/dd’) |
月.日 時:分 | 03.31 11:08 | formatDate(new Date(), ‘MM.dd hh:mm’) |
月.日 時:分:秒 | 03.31 11:12:07 | formatDate(new Date(), ‘MM.dd hh:mm:ss’) |
年.月.日 時:分:秒 | 2020.03.31 11:13:14 | formatDate(new Date(), ‘yyyy.MM.dd’) |
*
以上格式可自由組合出自己想要的時間日期樣式
路由傳參
// id 爲參數名 :後爲參數值
<router-link tag="div" :to="{path:'/Teamsizeroom',query:{id:1}}">
傳參跳轉頁面
</router-link>
例如:
調用後臺接口
findInteger () {
findInteger({
//參數,多個參數用,隔開
id: 1,
id2: 2,
id3: 3
}).then(res => {
//接口調用成功返回值
console.log(res)
}).catch(err => {
//接口調用事變返回值
console.log(err)
})
}