<!--容器-->
<div id="root">
姓:<input type="text" v-model="xing" /> 名:
<input type="text" v-model="ming" />
<!--如果我想让姓名一起展示,并且随着input的变化而变化,怎么处理呢?可以进行如下操作-->
<div>{{xing}}{{ming}}</div>
<!--但是我并不想像上面那样放2个变量麻烦,那该怎么办呢?此时我们就可以用到了计算属性,下面我们来新建一个 变量xingMing,并在Vue实例中新增一个 computed属性,代码如下所示-->
<div>姓名:{{xingMing}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
xing: "小",
ming: "丸子"
},
computed: { // 计算属性用computed 注意点:xing与ming没有变化时,此时会自动在页面中展示之前计算结果的缓存,而不会进行计算。即只有当计算的相关变量有所变化时,才会进行计算。
xingMing: function() { // 此处的xingMing的值是xing与ming计算的结果
return this.xing + this.ming;
}
}
});
</script>
<div id="root2">
<input type="text" v-model="msg"/>
<div>{{msg}}</div>
<!--实现:只要input变化就加1;用到侦听器,代码如下,新增一个count变量默认为0,然后再实例中新增一个watch属性代码如下-->
<div >计数:{{count}}</div>
</div>
<script>
new Vue({
el:"#root2",
data:{
msg:"小丸子",
count:0
},
watch:{
msg:function(){
this.count++;
}
}
})
</script>