没有合适的资源?快使用搜索试试~ 我知道了~
VUE(二)!VUE(二)!VUE(二)!VUE(二)!VUE(二)!
资源推荐
资源详情
资源评论
VUE 学习(二)
1 计算属性和观察者
1.1 计算属性
对于任何复杂逻辑,你都应当使用计算属性。其实计算属性和 data 里的属性是一个道理,只不过他是在 computed 参数中进行声明的,并且属性名后跟的是
一个函数返回一个根据逻辑处理过的内容,作为属性的值。
<!--test1:基础例子 对于任何复杂逻辑,你都应当使用计算属性。-->
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
//这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数:
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
1.2 方法
除了应用计算属性获得我们逻辑处理后的内容,还可以调用方法进行获取。
<!--test2: 调用方法-->
<div id="example1">
<p>test2:Reversed message: "{{ reversedMessage() }}"</p>
</div>
<script>
var vm1 = new Vue({
el: '#example1',
data: {
message: 'Hello'
},
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
1.3 方法 vs 计算属性缓存
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
每当触发重新渲染时,调用方法将总会再次执行函数。
结论:计算属性 在依赖没有改变的时候 读的是缓存的值,方法是不基于缓存,每次都是重新执行函数。
资源评论
天才之上
- 粉丝: 79
- 资源: 27
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功