一、 计算属性
computed：vue通过computed选项提供计算属性处理
对依赖属性赋值时才会触发计算函数
擅长处理场景：一个数据受多个数据影响
二、侦听器
watch：vue通过watch选项提供侦听处理
擅长处理场景：一个数据影响多个数据
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue计算属性和侦听器</title>
<script src="vue.js"></script>
</head>
<body>
<div id="vueDiv">
<!-- 一、计算属性 -->
firstStr:<input v-model="firstStr" />
lastStr:<input v-model="lastStr" />
<h1>{{fullStr}}</h1>
<!-- 二、侦听器 -->
<h1>{{count}}</h1>
</div>
</body>
<script>
new Vue({
el: '#vueDiv',
data: {
firstStr: '', //计算属性的依赖属性
lastStr: '', //计算属性的依赖属性
count: 0 //侦听器count
},
computed: { //计算函数，对依赖属性赋值时才会触发计算函数
//擅长处理场景：一个数据受多个数据影响
//计算属性getter
fullStr: function() {
return this.firstStr + this.lastStr;
}
},
watch: { //vue通过watch选项提供侦听处理，侦听某一个数据是否改变
//擅长处理场景：一个数据影响多个数据
fullStr: function(newStr, oldStr) {
this.count++;
}
}
})
</script>
</html>
646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
