使用methods监听文本
<div id="app">
<!-- 分析 -->
<!-- 监听文本框数据改变:如何监听??? -->
<input type="text" v-model="firstname" @keyup="getFullname"> +
<input type="text" v-model="lastname" @keyup="getFullname"> =
<input type="text" v-model="fullname">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
methods:{
getFullname(){
this.fullname = this.firstname +'-'+ this.lastname;
}
},
components:{
}
});
</script>
使用watch监听文本框
<div id="app">
<input type="text" v-model="firstname"> +
<input type="text" v-model="lastname"> =
<input type="text" v-model="fullname">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
methods:{
},
components:{
},
watch: {//使用这个属性,可以监听data中指定数据的变化,然后出发watch中对应的function
'firstname': function(newVal, oldVal){
// console.log('监听到了firstname的变化');
// this.fullname = this.firstname +'-'+ this.lastname;
// console.log(newVal +'---------'+ oldVal);
this.fullname = newVal +'-'+ this.lastname;
},
'lastname': function(newVal){//这里也可以没有参数
// this.fullname = this.firstname +'-'+ this.lastname;
this.fullname = this.firstname +'-'+ newVal;
}
}
});
</script>
使用computed监听文本输入
<div id="app">
<input type="text" v-model="firstname"> +
<input type="text" v-model="lastname"> =
<input type="text" v-model="fullname">
<!-- 第二次使用不会被重新出发求值过程 -->
<p>{{ fullname }}</p>
<p>{{ fullname }}</p>
<p>{{ fullname }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
},
methods:{
},
components:{
},
// 在这里定义一些属性,这里属性称为计算属性,这里属性就是一个方法,只不过我们计算属性的时候,把他们的名称当做属性使用
computed: {
// 计算属性在引用的时候,一定不要添加()使用,直接把它当做属性使用就好
// 只要计算属性这个function内部,所用到的任何data中的数据发生变化,慧慧立即重新计算这个属性的值
// 计算属性的求职结果,会被缓存起来,方便下次调用,如果计算属性方法,所用到的数据,数据没有发生变化,那么不会被调用到
'fullname': function(){
return this.firstname +'-'+ this.lastname;
}
},
});
</script>