vue计算属性及使用详解资源-CSDN下载

vue计算属性使用

5星 · 超过95%的资源 70 浏览量 2020-08-27 18:12:57 上传评论收藏 71KB PDF 举报

资源推荐

资源详情

资源评论

vue计算属性及使用详解计算属性及使用详解

计算属性就是模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。这篇文章主要介绍了vue计算

属性详解,需要的朋友可以参考下

一、什么是计算属性一、什么是计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例

如：

<div id="example">

{{ message.split('').reverse().join('') }}

</div>

这里的表达式包含3个操作，并不是很清晰，所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理。

二、计算属性的用法二、计算属性的用法

在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。

我们把上面的例子用计算属性的方式重写一下

<div id="example">

<p>Original message: "{{ message }}"</p>

<p>Computed reversed message: "{{ reversedMessage }}"</p>　　//我们把复杂处理放在了计算属性里面了

</div>

var vm = new Vue({

el: '#example',

data: {

message: 'Hello'

},

computed: {

reversedMessage: function () {

// `this` 指向 vm 实例

return this.message.split('').reverse().join('')

}

}

});

结果：

Original message: "Hello"

Computed reversed message: "olleH"

除了上例简单的用法，计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也

会更新。

<body>

<div id="app">

<button @click="add()">补充货物1</button>

<div>总价为：{{price}}</div>

</div>

</body>

var app = new Vue({

el: '#app',

data: {

package1: {

count: 5,

price: 5

},

package2: {

count: 10,

price: 10

}

},

computed: {

price: function(){

return this.package1.count*this.package1.price+this.package2.count*this.package2.price　　//总价随着货物或价格的改变会重新计算

}

},

methods: { //对象的方法

add: function(){

this.package1.count++

}

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

金山文档

2023-06-13

文章虽然简短，但并没有遗漏介绍任何一部分vue计算属性的知识点，值得学习。
无能为力就要努力

2023-06-13

文中的例子都很简单，但却很实用，让我更加熟悉vue计算属性。
经年哲思

2023-06-13

个人认为讲解得挺详细的，很容易上手。
朱王勇

2023-06-13

如果你刚入门vue，不妨看看这篇文章，讲得很通俗易懂。
刘璐璐璐璐璐

2023-06-13

总体来说这篇文章介绍的内容还是比较全面的，值得推荐。

前往

页

weixin_38512781

粉丝: 6

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip