vue 计算属性传参,vue 计算属性的值怎么赋值data
本文主要介绍Vue的计算属性。一般来说，属性是放在数据中的，但有些属性可能需要一些逻辑运算才能获得。所以我们可以把这些属性变成计算属性。我们来看看具体的例子，有需要的朋友可以参考一下。
:
目录
1.基本示例
2.计算属性缓存vs方法
3.计算属性的设置者
前言：
一般属性都是放在数据里的，但是有些属性可能需要一些逻辑运算才能得到，所以我们可以把这些属性变成计算属性。
比如以下：
div id=example
{{ message.split( )。反转()。加入(“”)}}
/div
在这个地方，模板不再是简单的声明性逻辑。你必须观察一段时间才能意识到，这里是翻转字符串，想要显示变量消息。当您希望在模板的多个位置包含这个翻转字符串时，处理起来会更加困难。
因此，对于任何复杂的逻辑，都应该使用计算属性。
1、基础例子
div id=应用程序
H2总价：{{totalPrice}}/h2
/div
脚本
const vm=new Vue({
埃尔： #app ，
数据：{
消息：“你好”，
书籍：[
{姓名：《三国演义》，价格：30}，
{姓名：《红楼梦》，价格：40}，
{姓名：《西游记》，价格：50}，
{姓名：《水浒传》，价格：60}，
],
},
计算值：{
//计算属性的getter
totalPrice: function (){
设结果=0；
//`This `指向虚拟机实例
for (let book of this.books)
结果=book.price
}
回送结果
}
}
})
/脚本
结果：总价：180
这里我们声明一个计算属性，totalPrice。然后通过for循环计算书的总价，要这样计算的属性写在computed里。
一般来说，属性有两种方法：get获取属性值，set设置属性值，get attribute是computed中的默认值。我们的vm.totalPrice依赖于books.price如果图书的价格发生变化，那么计算出来的属性totalPrice也会动态变化。
2、计算属性缓存 vs 方法
你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：
div id=应用程序
H2总价：{{getAllPrice()}}/h2
/div
脚本
const vm=new Vue({
埃尔： #app ，
数据：{
消息：“你好”，
书籍：[
{姓名：《三国演义》，价格：30}，
{姓名：《红楼梦》，价格：40}，
{姓名：《西游记》，价格：50}，
{姓名：《水浒传》，价格：60}，
],
},
方法：{
getAllPrice: function () {
设结果=0；
//`This `指向虚拟机实例
for (let book of this.books)
结果=book.price
}
回送结果
}
},
})
/脚本
我们可以将相同的函数定义为方法，而不是计算属性。两种方法的最终结果完全一样。但是，不同之处在于，计算属性是基于它们的响应依赖关系进行缓存的。只有当相关的响应相关性发生变化时，才会对它们进行重新评估。这意味着只要书籍没有改变，多次访问totalPrice计算属性将立即返回以前的计算结果，而不必再次执行该函数。
因此计算属性被缓存。
为什么我们需要缓存？假设我们有一个高性能开销的计算属性A，需要遍历一个巨大的数组，做大量的计算。那么我们可能还有其他依赖于A的计算属性，如果没有缓存，必然会多次执行A的getter！如果不想拥有缓存，请改用方法。
3、计算属性的 setter
默认情况下，只有getter用于计算属性，但是您也可以在需要时提供setter:
计算值：{
总价：{
get: function () {
设结果=0；
//`This `指向虚拟机实例
for (let book of this.books)
结果=book.price
}
回送结果
},
set: function (newValue) {
for (let book of this.books)
book.price=10
}
}
}
}
这里，我们添加set方法。当vm.totalPrice=[.]是运行的，会调用setter，然后图书总价会发生变化，但一般不会使用set。
关于Vue computed的这篇文章到此为止。有关Vue computed的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。