vue修改computed属性值,vue computed写法
本文主要介绍了Vue中的计算属性，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
插值表达式方法摘要computed今天，我们将讨论vue中的computed属性。为了更好地理解计算属性的好处，我们将首先通过一个案例来了解计算属性。有以下几种情况：定义了两个输入框和一个span标签，span标签中的内容是两个输入框中的值，span标签中的内容随着输入框中的内容而变化。
插值表达式
首先，我们使用插值表达式来实现这个效果。
身体
div id=应用程序
姓氏：input type= text v-model=first name/br
/br
name:input type= text v-model=last name/br
/br
姓名：span { {名字} } { {姓氏}}/span
/div
/body
脚本类型=文本/javascript
新Vue({
埃尔： #app ，
数据：{
名字：张，
姓氏：“三”
},
方法：{
}
})
/脚本
我们可以发现，我们可以简单的达到想要的效果，但是如果我现在要添加另一个要求，我输入英文的时候会把第一个字母大写。这个时候，我们只能用以下方法。
身体
div id=应用程序
first name:input type= text v-model=first name/br
/br
姓氏：输入类型= text v-model=姓氏/br
/br
全名：span { {名字. replace(名字[0]，名字[0])。toupper case())} } { { last name . replace(lastName[0]，last name[0]。toUpperCase())}}/span
/div
/body
脚本类型=文本/javascript
var str=
新Vue({
埃尔： #app ，
数据：{
名字：“乔”，
姓氏：“莉莉”
},
方法：{
}
})
/脚本
从插值表达式显示的情况来看，虽然可以达到预期的效果，但是代码特别冗长，不利于阅读。这时就想到可以在方法中加入方法来达到这个效果。
methods
将全名方法添加到方法中。
身体
div id=应用程序
first name:input type= text v-model=first name/br
/br
姓氏：输入类型= text v-model=姓氏/br
/br
全名：span { {全名()}}/span
/div
/body
脚本类型=文本/javascript
var str=
新Vue({
埃尔： #app ，
数据：{
名字：“乔”，
姓氏：“莉莉”
},
方法：{
全名(){
设a=“”；
设b=“”；
if (this.firstName.length！=0)
a=this . first name . replace(this.firstName[0]，this . first name[0])。toUpperCase())
if (this.lastName.length！=0)
b=this . last name . replace(this.lastName[0]，this . last name[0])。toUpperCase())
返回a b
}
}
})
/脚本
我们可以看到，该方法可以解决代码过长的问题。然而，我们面临着另一个问题。当我们学习vue中的数据属性时，我们知道每当数据中的数据发生变化时，页面中使用数据的地方就会更新。因此，当数据firstName和lastName发生变化时，会再次调用方法fullName，这在某些情况下会导致代码效率低下。此外，方法中的方法运行的次数将与它在插值表达式中使用的次数一样多。针对以上两种方法的缺点，出现了另一种方法，就是使用computed属性。
computed
有些属性可以在computed: Computed属性中定义。计算的本质其实是方法，但可以直接作为属性。它具有以下特点
使用时不需要在计算的属性上加()，直接写名字就可以了。如果计算属性使用数据中的数据，当数据发生变化时，它会立即重新计算计算属性的值。第一次使用计算属性的结果将被缓存，并且在属性所依赖的数据发生变化之前，不会重新计算计算属性的结果。
div id=应用程序
first name:input type= text v-model=first name/br
/br
姓氏：输入类型= text v-model=姓氏/br
/br
全名：span { {全名}}/span/br
/br
全名：span { {全名}}/span/br
/br
全名：span { {全名}}/span
/div
/body
脚本类型=文本/javascript
var str=
新Vue({
埃尔： #app ，
数据：{
名字：“乔”，
姓氏：“莉莉”
},
计算值：{
//get的作用是什么？读取fullName时调用Get，返回值是fullName的值。
//什么时候会调用//get？1.第一次读全名时。2.当相关数据改变时
全名：{
get() {
Console.log(嗨，我调用了computed )
设a=“”；
设b=“”；
if (this.firstName.length！=0)
a=this . first name . replace(this.firstName[0]，this . first name[0])。toUpperCase())
if (this.lastName.length！=0)
b=this . last name . replace(this.lastName[0]，this . last name[0])。toUpperCase())
返回a b
}
}
}
})
/脚本
/html
前面我们说过methods中的方法在页面中使用N次就会被调用N次，但是computed中的属性不会出现上述情况。在上面的代码中，我们在页面中使用了3次相同的计算属性，但是只输出了一次结果。使用方法中的完整方法，我们也输出结果3次，这意味着该方法被调用了3次。为什么会有这样的结果？这是因为在计算中有缓存机制，而在方法中没有。当代码解析到第一个fullName的时候，fullName的结果会被缓存，但是到了第二次或者第三次的时候，会发现已经存在于缓存中，所以不会再调用。
对computed的用法有了大致的了解之后，我们来补充computed。
在computed中，我们可以通过将set方法添加到计算属性中来实现赋值效果。
身体
div id=应用程序
first name:input type= text v-model=first name/br
/br
姓氏：输入类型= text v-model=姓氏/br
/br
全名：span { {全名}}/span/br
/br
/div
/body
脚本类型=文本/javascript
var str=
var app=新Vue({
埃尔： #app ，
数据：{
名字：“乔”，
姓氏：“莉莉”
},
计算值：{
//get的作用是什么？读取fullName时调用Get，返回值是fullName的值。
//什么时候会调用//get？1.第一次读全名时。2.当相关数据改变时
全名：{
get() {
console.log(this)
返回this.firstName this.lastName
},
设置(值){
this.firstName=val[0]
this .姓氏=val[1]
}
}
}
})
/脚本
我们可以看到，当在控制台中指定全名时，名字和姓氏都会改变。
如果计算属性中只有get没有set，可以像下面的代码一样直接写。
计算值：{
全名(){
console.log(this)
返回this.firstName this.lastName
}
}
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。