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)
})
}