vue计算属性的使用,
这篇文章主要为大家详细介绍了某视频剪辑软件计算属性实现成绩单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件计算属性实现成绩单，供大家参考，具体内容如下
代码如下：
！声明文档类型
超文本标记语言
头
meta charset=utf-8
标题成绩单统计/标题
脚本src= js/vue。js type= text/JavaScript charset= utf-8 /script
style type=text/css 。gridtable{
字体系列：verdana、arial、sans-serif；
字体大小：11px
颜色：# 333333;
边框宽度：1px
边框颜色：# 666666;
边框-塌陷：塌陷；
}。网格表th{
边框宽度：1px
填充：8px
边框样式：纯色；
边框颜色：# 666666;
背景色：# dedede
}。网格表td{
边框宽度：1px
填充：8px
边框样式：纯色；
边框颜色：# 666666;
背景色：# ffffff
}
/风格
/头
身体
div id=应用程序
table class=gridtable
tr
泰国(泰国)学科/th
泰国(泰国)分数/th
/tr
tr
任务描述语文/td
任务描述
输入类型= text name= id= value= v-model。number=中文/
/td
/tr
tr
任务描述数学/td
任务描述
输入类型= text name= id= value= v-model。number= Math /
/td
/tr
tr
任务描述英语/td
任务描述
输入类型= text name= id= value= v-model。number= English /
/td
/tr
tr
任务描述总分/td
任务描述
输入类型= text name= id= value= v-model。number= sum /
/td
/tr
tr
任务描述平均分/td
任务描述
输入类型= text name= id= value= v-model。number= average /
/td
/tr
/表格
/div
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
中国人：100,
数学：100,
英语：60
},
计算值：{
总和：函数(){
归还这个。中文这个。数学这个。英语；
},
平均值：函数(){
返回数学。圆(这个。sum/3)；
}
},
})
/脚本
/body
/html
当我改变语文，数学，英语的成绩，总分和平均分会随着实时变化，这就是某视频剪辑软件计算属性的特点。
Vue计算属性的传参
计算属性本质是一个方法，但是通常被当作一个属性来使用，一般不加()。但在实际开发中，如果需要给计算属性中的方法传参，就需要使用闭包传参的方法。
！声明文档类型
超文本标记语言
头
meta charset=utf-8
标题评估/标题
脚本src= js/vue。js type= text/JavaScript charset= utf-8 /script
div id=应用程序
{ {添加(2)}}
/div
脚本类型=文本/javascript
var vm=new Vue({
埃尔： #app ，
数据：{
数量：1
},
计算值：{
add(){
返回函数（索引){
返回这个号码索引；
}
}
}
})
/脚本
/头
身体
/body
/html
注意：
计算属性本身不能像方法一样在括号里填写参数来达到传参的目的，需要在该方法体里写真正的方法，来接受参数。
同理，计算属性方法体参数可省略，即本例子中add(){}和添加（索引){}均可
计算属性的getter和setter
计算属性通常用来获取数据（根据数据的变化而变化),所以其默认只有吸气剂，但需要时，Vue.js也提供作曲者功能100套。方法与得到方法先后顺序无关，并且设置方法接受的参数为得到方法的返回值。
！声明文档类型
超文本标记语言
头
meta charset=utf-8 /
标题计算/标题
脚本src= js/vue。js type= text/JavaScript charset= utf-8 /script
/头
身体
div id=应用程序
名字：input type= text name= id= value= v-model= first /
姓氏：输入type= text name= id= value= v-model= last /
p全名：input type= text name= id= value= v-model=全名//p
/div
脚本类型=文本/javascript
var vm=new Vue({
埃尔： #app ，
数据：{
首先："杰克",
最后："琼斯"
},
计算值：{
全名：{
get:function(){
返回this.first this.last
},
set:函数(参数){
var names=parameter.split( )
this.first=names[0]
this . last=names[names . length-1]
}
}
}
})
/脚本
/body
/html
计算属性与方法的区别
这种计算属性的方法可以确保代码只在必要的时候执行，适合处理一些潜在的资源密集型工作。但是，如果项目没有缓存功能，应根据实际情况使用方法。
计算的特征如下：
当计算属性的依赖关系发生变化时，会立即进行计算，并自动更新计算结果。
计算出来的属性的评估结果会被缓存，方便下次直接使用。
计算属性适合执行比较复杂的表达式，往往太长或者需要频繁重用，所以不能直接在模板中使用。
计算属性是数据对象的扩展和增强版本。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。