vue修改computed属性值,vue input属性
本文主要详细介绍了Vue的计算特性。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
computed计算属性1、什么是计算属性2、为什么要用计算属性3、compute、methods和watch的区别4、案例：遍历数组对象时的监控和汇总。
computed计算属性
1、什么是计算属性
计算属性的本质是方法，但是在使用这些计算属性的时候，直接把它们的名字作为属性，不把计算属性作为方法调用，所以不需要加括号()来调用。
2、为什么要用计算属性
当你需要一个属性的时候，你需要做一些计算。例如，如果您想要一个折扣货币属性，现在有一个价格和一个折扣。然后打折=价格*折扣。折扣与现有属性价格和折扣相关联。
为了得到贴现值，我们可以这样写。
div { {价格*折扣}}/div
我们不是要打折属性吗？好像不需要这样添加一个属性，只需要通过表达式计算贴现值就可以了。
所以，如果我们要打折呢？我们可能会想到用方法来写一个计算的方法。
！-模板-
div class=价格
原始价格：span v-text=price/spanbr
当前价格：span v-text=discounted()/span
/div
！-剧本-
data() {
返回{
价格：100，
折扣：0.8
}
},
方法：{
折扣(){
价格*折扣
}
},
看看vue的comunidad计算属性。
！-模板-
div class=价格
原始价格：span v-text=price/spanbr
当前价格：span v-text=折扣/span
/div
！-剧本-
计算值：{
折扣(){
返回this.price*this .折扣
}
},
我们又会想，用price*discount这种表达方式不就可以打折了吗？为什么我们要花那么多时间写什么方法？计算出来的。
那么问题来了。如果我们的折扣价是基于您的购买量，请点击规则：
原价的x折0x=500.950x=1000.85100x0.8那么如何才能实现呢？我们先试着用表情直接看。
这里有一个错误，显然不支持多行表达式。如果需要一些稍微复杂的计算，就要用到函数。
但是，建议即使简单的表达式也用computed或computed编写。
因为我们要用关注分离的思路写程序，比如css是用样式写的，js是用脚本写的，这样更方便我们阅读，代码也更规范。
所以，又有问题了。这里我们确实得到了想要的值，但是我们发现使用方法也是可以的。为什么我们需要计算？两者有什么区别？
1.使用方法时，通常需要括号，但computed不需要。2.方法将在每次调用该函数时重新执行该函数，而computed的内部变量保持不变或为返回值不变的情况下多次调用只会执行一次。在随后的执行中，计算结果将直接从缓存中获取。至于computed为什么不用括号调用like方法，是因为computed本身就是一个属性，其本质是computed内部有两个方法(set和get)。computed最后的道德结果是get方法的返回值，set方法很少使用。因此，简体书写是上述通常使用computed的格式。
3、compute、methods和watch三者的区别
computedmethodswatch缓存中有异步吗？触发模板用法：数据模板用法：方法监控数据传输灵活性最低，最高推荐最高，然后最低(依赖容易变复杂)
4、案例：遍历数组对象的时候进行监视
所以我们平时监控数组，遍历的时候监控当前数组的对象。我们做什么呢
Computed也可以传入。我们需要检测哪个对象并传入当前对象，这样检测到的数据就是动态的。
我直接用昨天玩钢性铸铁写的例子吧。这里只需要关注价格，其他可以忽略，我也懒得改了，哈哈。
模板
div class=容器
差异
class=list
v-for=列表中的项目
:key=item
div class=列表项
图片
:src=item.url
alt=
div class=item-select
！-div style= width:120 px；浮动：左；
按钮喜欢/按钮
/div
div style= width:120 px；浮动：左；
按钮不喜欢/按钮
/div -
svg v-show=！项目。like @ click= liked(item) t= 1647706494573 class= icon view box= 0 0 1025 1024 version= 1.1 xmlns= http://www .w3。org/2000/SVG p-id= 5953 width= 200 height= 200 path d= m 935.6696967676 115.588 24.0799999953 l-1.8059999996 0c-16.85559999999994 1-15.659999996 9-27
SVG v-show= item。like @ click= liked(item) t= 1647706494573 class= icon view box= 0 0 1025 1024 version= 1.1 xmlns= http://www .w3。org/2000/SVG p-id= 5953 width= 200 height= 200 path d= m 935.669677 24.07999953-27.0899999995956 0-30.099999999999999947-32.5089995
/div
div class=价格
原价：span v-text=item.price/span
现价：span v-text=折扣（项目)/span
（点亮中间的爱心再减5元！)
/div
/div
/div
/div
/模板
脚本
导出默认值{
姓名：孩子，
data() {
返回{
列表：[
{
价格：88.88,
像：假的，
网址：
https://tse 4-mm . cn冰。net/th/id/OIP-C . e 5 ce 0 sanblrlcc 6j 5 iqxvqhae 7？w=268h=180c=7r=0o=5d pr=1.12 PID=1.7 ，
},
{
价格：100,
像：假的，
网址：
https://img。zcool。cn/community/0146 EB 57d 154 f 40000018 c1b 84142 e . jpg @ 1280 w _ 1l _ 2o _ 100 sh。 jpg ，
},
{
价格：20.56,
像：假的，
网址：
https://img。zcool。cn/community/01e 89 b5 ddfb3c 7a 80120686 b 029383。jpg @ 2o。 jpg ，
},
{
价格：100.50,
像：假的，
网址：
https://img。zcool。C1 b 76 f 216。jpg @ 1280 w _ 1l _ 2o _ 100 sh。 jpg ，
},
{
价格：666.00,
像：假的，
网址：
https://img。zcool。cn/community/0132 e85e 0 ABC 74a 8012165180d 2178。jpg @ 1280 w _ 1l _ 2o _ 100sh。 jpg ，
},
],
价格：100,
折扣：0.8
}
},
计算值：{
折扣(){
返回功能（项目){
//对价格进行条件计算
假设价格=项目价格
if(0priceprice=50){
价格=价格*0.9
}else if(50priceprice=100){
价格=价格*0.85
}else if(100price){
价格=价格*0.8
}
if(item.like){
价格-=5
}
//返回两位小数
return price.toFixed(2)
}
},
},
方法：{
喜欢的（项目){
item.like=！项目。喜欢
}
},
};
/脚本
风格
正文{
背景-图像：线性-渐变（到顶部、#c4c5c7 0%、#dcdddf 52%、# ebebeb 100%)；
}。容器{
边距：0自动；
宽度：400像素
/*边框：1px纯黑；*/
}。列表项目{
边距-顶部：40px
}
p {
保证金：10px 40%；
}。列表项目img {
宽度：100%;
高度：300像素
边框半径：20px
盒影：5px 10px 13px 3px rgba(110，115，127，0.5)；
不透明度：0.8;
转场：0.8秒
}。列表项img:悬停{
不透明度：1;
}。项目选择{
宽度：100%;
高度：80px
位置：相对；
}
/* .项目选择按钮{
颜色：白色；
字体粗细：粗体；
字体系列：幼圆；
边距-顶部：20px
宽度：100像素
高度：55像素
左边距：90px
背景图像：线性渐变（到顶部、#a3bded 0%、# 6991 C7 100%)；
填充：15px
显示：内嵌；
字体大小：18px
文本对齐：居中；
边框半径：10px
过渡：0.5秒
空白：nowrap
边框：1px #dee7ec实心；
不透明度：0.8;
}
按钮：悬停{
背景图像：线性渐变（向右、#ff758c 0%、# ff 7eb 3 100%)；
颜色：白色；
宽度：105像素
高度：60px
} */。列表项svg{
宽度：60px
高度：60px
边距：20像素170像素
位置：绝对；
左：0;
top:0；
转场：0.3秒
}。列表项svg:悬停{
宽度：65像素
身高：65像素
转场：0.1秒
}
/风格
我们来看看是否监视成功
加个点亮爱心再减5元的功能
添加个喜欢方法，点击了就将当前对象的喜欢取反
在计算属性中再添加一个条件，当点亮了爱心，也就是喜欢=真，就再减5元
如果点亮爱心，现价可以再减5元，取消点亮，恢复原来的价格，说明监视成功。
来看看效果吧
当取消点亮，价格又会恢复。
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。