<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性与侦听器</title>
<script src="../2.5.20-vue.js"></script> <!--//提前加载，避免出现抖屏-->
</head>
<body>
<div id="root">
姓：<input v-model="firstName" />
名：<input v-model="lastName" />
名：<input v-model="aa" />
<div>{{firstName}}{{lastName}}</div>
<!--<div>{{fullName}}</div>-->
<div>{{count}}</div>
<div>{{aa}}</div>
</div>
<script>
new Vue({
el: '#root', /**创建vue的实例，接管id等于root的内容*/
data: {
firstName: '',
lastName: '',
aa: '',
count: 0,
},
/* computed: { //只有依赖的数据发生变化的时候才会重新计算,如果没有发生变化，那么会使用缓存
fullName(){
return this.firstName + ' '+ this.lastName
}
},*/
watch: { //监听器监听数据的变化，一旦发生变化我就可以在侦听器里面做我的业务逻辑
firstName(){
this.count++
},
lastName(){
this.count++
},
aa(){
this.count++
}
}
})
</script>
</body>
</html>
Vue中的计算属性与侦听器
猜你喜欢
转载自blog.csdn.net/xuxinwen32/article/details/86673761
今日推荐
周排行