console
var vm = new Vue({
el: '#demo',
data: {
firstName: '张',
lastName: '三',
fullName: '张三',
changeNum: 0,
},
methods: {
changeFirstName: function() {
var self = this;
if (self.firstName == "张") {
self.firstName = "李"
} else {
self.firstName = "张"
}
self.changeNum++
},
changeLastName: function() {
var self = this;
if (self.lastName == "三") {
self.lastName = "四"
} else {
self.lastName = "三"
}
self.changeNum++
}
},
computed: {
// 读取
changeNum2: function() {
return this.changeNum + 1
},
// 读取+改变
},
watch: {
firstName: function (val, val1) {
console.log(val, val1)
this.fullName = val + this.lastName
},
lastName: function (val) {
console.log(val)
this.fullName = this.firstName + val
}
},
created: function() {
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="demo">{{ fullName }}
<div @click="changeFirstName">改变姓</div>
<div @click="changeLastName">改变名</div>
<p>{{changeNum}}</p>
<p>{{changeNum2}}</p>
</div>
body{
color:black;
}