1.data通常与v-model结合使用,是双向绑定的。
<input type=text v-model='title' />
data() {
return {
title: '我是标题',
}
}
2.computed是计算属性,实际上和data对象里的数据属性是差不多的(使用上)
<template>费用为:{{calcCost}}</template>
computed: {
calcCost() {//计算费用
let cost= count*price*zhekou;
return cost
},
}
3.watch:类似于监听机制+事件机制。(监听某个变量,里面可以运行事件)。
watch 的用法有个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值得时候也执行函数,就需要用到 immediate 属性。
监听基础类型的数据。
watch: {
isSubmit(newVal, oldval) {
if(newVal){
//当isSubmit值改变 doingsometing
//如:当提交表单后,清空表单数据等
}
}
}
监听引用类型的数据:如对象、数组等
watch: {
obj: {
// 数据变化时执行的逻辑代码
handler(newName, oldName) {
console.log(‘obj.a changed’);
},
// 开启深度监听
deep: true
}
}
又可以单独监听对象的某个属性值:监听obj的age属性
'obj.age': {
handler(newV, oldV) {
console.log("watch", newV, oldV)
},
immediate: true
}