Vue的计算属性

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

今天在学习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
        }
    }
})
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/vue/vue-computed.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部