特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
今天在学习Vue 2.0中的计算属性。发现@混元霹雳手 老师整理的一篇笔记《史上最详细 VUE2.0 全套 Demo 讲解 基础3(计算属性)》。看后感觉受益非浅。特意把自己根据老师的笔记一路学习下来。感兴趣的同学,也可以一起来玩。
Vue中的计算属性是所有属性的计算,而这些计算都是变向的在过滤值,通过数据的不断变化计算出来不同的值和操作不同的方法. 而在Vue中,会使用到计算属性的场景常见的有:
- 模板内的表达式
- 属性
v-bind
里可以进行的表达式 - 指令中可以进行的表达式
以上三者的主要优势是简洁。如果只是一个小操作,比如说一些简单的数值++
,字符拼接,三元表达式,那么使用相当方便。当然,以上方式也有自己的劣势。一旦要处理的逻辑复杂,代码量就会变得大得多,而且难于维护。比如说用到if
语句来控制流程。那么这个时候可能会想到用filter
,那么filter
场景适用于哪里,我们后面再聊,咱们先来看一个简单的示例。
<div id="app">
<button @click="count++">{{count + '分'}}</button>
<div>
<input v-model="message" />
</div>
<p>{{ message.split(' ').reverse().join(' ') }}</p>
</div>
let app = new Vue({
el: '#app',
data () {
return {
count: 0,
message: ''
}
}
})
效果如下:
从上面的示例中我们可以看出:
- 我们在模板内使用字符串拼接,
{{count + '分'}}
- 通过
v-bind
指定绑定了一个click
事件,它只做了一件事情,就是count++
,button
每点击一次,count
值增加1
,注意,这里并没有使用methods
input
通过v-model
做了数据双向绑定,绑定了message
,并且在p
标签中对message
字符串进行反转。
在p
标签中对message
进行计算转换的时候,是不是觉得语义不是很强烈,那么用什么办法更好呢?这就需要我们使用到前面提到的filter
。
使用 filter
我们可以使用filter
来修改前面的示例。事实下,在Vue中使用filter
具有自己的优势,也具有自己的劣势:
- 优势:
filter
给我们用于计算和过滤一些模板表达式和v-bind
属性表达式一些弊端的地方进行计算,他们会返回当前计算的值,可以进行传参在多地方共用这个过滤方法 - 劣势:如果我们要计算多个数据不同变化结合而成的地方,那么
filter
就比较难过滤到了,本质上filter
就是一个一对一的行为,对单个数据进行过滤,可以进行传参,同方法,但不同参
把上面的示例,用filter
修改之后就像下面这样:
<div id="app">
<button @click="count++">{{count + '分'}}</button>
<div>
<input v-model="message" />
</div>
<p>{{ message | reverseString }}</p>
</div>
let app = new Vue({
el: '#app',
data () {
return {
count: 0,
message: ''
}
},
filters: {
reverseString (value) {
if (!value) return ''
value = value.split('').reverse().join('')
return value
}
}
})
如需转载,烦请注明出处:https://www.w3cplus.com/vue/vue-computed.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!