主页 / 网络编程 /

Vue.js学习之计算属性

网络编程 2021-07-04 19:20www.168986.cn编程入门
Vue.js 的内联表达式非常方便，但它最合适的使用场景是简单的布尔操作或字符串拼接。如果涉及更复杂的逻辑，你应该使用计算属性。狼蚁网站SEO优化这篇文章主要给大家介绍了Vue.js中的计算属性,需要的朋友可以参考借鉴，一起来看看吧。

前言

计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。

开始用vue会把所有的模版上的数据都放到data属性里，或者有的时候data属性里变量多了之后觉得有些只是用一次的变量就直接写到模版里了，后来看到同组的同事在用puted属性，就又去查了一下api，发现这种情况其实最好用的就是puted。

1. puted可以保持模版的清晰，在template里尽量只进行展示和绑定，而不要加入逻辑操作。

2. 用puted的还有一个好处就是会跟随其他data属性的变化自动变化

比如官方文档的一个例子：

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar',
 fullName: 'Foo Bar'
 }
})
vm.$watch('firstName', function (val) {
 this.fullName = val + ' ' + this.lastName
})
vm.$watch('lastName', function (val) {
 this.fullName = this.firstName + ' ' + val
})

如果用watch就会产生代码的冗余，比如在直播中状态的变化就可以用来计算是否展示视频之类的上层属性

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar'
 },
 puted: {
 fullName: function () {
  return this.firstName + ' ' + this.lastName
 }
 }
})

总结

以上就是关于Vue.js的计算属性的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

上一篇：Ionic 2 实现列表滑动删除按钮的方法 下一篇：ionic中列表项增加和删除的实现方法

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by