1、watch属性使用案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn镜像快速导入Vue包-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
<script>
//2.创建一个vue实例
var vm = new Vue({
el: '#app', //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
data: { //data属性中存放的是el中要用到的数据
firstname:'',
lastname:'',
fullname:'',
msg: '欢迎学习Vue' //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序
},
methods:{},
watch:{
//使用这个属性，可以监视data中指定数据的变化，然后触发这个watch中对于的function处理函数
'firstname':function(newVal,oldVal){
console.log("监听到了变化")
// this.fullname = this.firstname + '-' + this.lastname
this.fullname = newVal + '_' + this.lastname
},
'lastname':function(newVal ,oldVal){
console.log("监听到了变化")
// this.fullname = this.firstname + '-' + this.lastname
this.fullname = this.firstname + '-' + newVal
}
}
})
</script>
</body>
</html>
2、watch属性使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn镜像快速导入Vue包-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
<p>{{fullname}}</p>
</div>
<script>
//2.创建一个vue实例
var vm = new Vue({
el: '#app', //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
data: { //data属性中存放的是el中要用到的数据
firstname:'',
lastname:'',
msg: '欢迎学习Vue' //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序
},
methods:{},
computed:{
//在computed中，可以定义一些属性，这些属性叫做计算属性，计算属性本质就是一个方法，
//只不过我们在使用这些计算属性的时候，是把他们的名称直接当作属性来使用的，并不会把
//计算属性当作方法去调用
//注意：计算属性在引用的时候，一定不要加()去调用，直接把它当作普通属性去绑定
//注意：只要计算属性这个function内部所用到的任何data中的数据发生变化，就会立即重新计算这个属性
//注意：计算的求值结果会被缓存起来，方便下次调用，如果计算属性方法中，所有的任何数据
//都没有发生变化，则不会重新计算属性求值
'fullname':function () {
return this.firstname + '-'+ this.lastname
}
}
})
</script>
</body>
</html>