computed计算属性
计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
get用法
<div class="computed_watch">
<P>我的姓名:{{message}}</P>
<P>我的姓名:{{reversedMessage}}</P>
</div>
data() {
return {
message: 'Hello',
}
},
//message改变的时候 reversedMessage的结果也会改变
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
set用法
data() {
return {
firstName: 'Foo',
lastName: 'Bar'
}
},
computed: {
fullName: {
// getter 改变firstName lastName的时候 fillName会跟着一起改
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter 改变fillName的时候 firstName lastName会跟着一起改
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
},
watch侦听属性
1.简单监听以及深度监听
<div class="biji">
<p>{{value}}</p>
<p>{{first.second}}</p>
<button @click="change">改变</button>
</div>
data() {
return {
value:'今天也要努力工作呀',
'first': {
second: 0
}
}
},
watch: {
//简单的监听
value(oldVal, newVal){
console.log(oldVal)
console.log(newVal)
},
//深层监听
first: {
handler(oldVal, newVal) {
console.log(oldVal)
console.log(newVal)
},
// immediate: true, //如果为true的时候第一次进页面触发
deep: true
}
},