蜂享w100,蔡少芬女儿,学生票优惠区间
前言
计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,vue 会在其依赖的任何值导致该计算属性改变时更新 dom。这个功能非常强大,它可以让你的代码更加声明式、数据驱动并且易于维护。
开始用vue会把所有的模版上的数据都放到data属性里,或者有的时候data属性里变量多了之后觉得有些只是用一次的变量就直接写到模版里了,后来看到同组的同事在用computed属性,就又去查了一下api,发现这种情况其实最好用的就是computed。
1. computed可以保持模版的清晰,在template里尽量只进行展示和绑定,而不要加入逻辑操作。
2. 用computed的还有一个好处就是会跟随其他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' }, computed: { fullname: function () { return this.firstname + ' ' + this.lastname } } })
总结
以上就是关于vue.js的计算属性的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论