反选 <input type="checkbox">
<input type="checkbox" v-for="check in checks" v-model="check.check">
data () {
return {
msg: {a: 1},
checks: [{check: ture}, {check: true}]
}
},
computed: {
checkAll: {
get() {
// 当取值时会执行get方法
// every 有一项是false就会停止并返回false
return this.checks.every(item -> item.check)
},
set (newValue) { // 计算属性一般很少用set方法, 一般只有使用v-model计算属性才能添加set方法
this.checks.forEach(item => {
item.check = newValue
})
}
}
},
watch: {
// 默认只会监控第一层的变化, 如果是对象类型无法获取老值
msg:[
handler (newValue, oldValue) {
console.log(newValue,oldValue)
},
deep: true // 增加deep:true就会在内部再去对这个对象取值
},{
handler() {},
immediate: true //立即执行
},
'fn'
]
}
// watch 的三种写法 函数 对象 字符串
// 计算属性和watch的区别 都是一个watcher 计算属性内部不会立马取值,只有取值的时候才会执行, 有缓存 如果依赖的数据不发生变化, 则不更新结果
// watch默认在内部先执行 他要先计算出一个老值来,如果数据变化就会执行
// 第一个结果 不会使用methods methods不具备缓存
vue 计算属性和watch
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。