哪个素材网站做美工最好,河南洛阳网站建设,wordpress 移动端,青海小学网站建设文章目录 计算属性computed 计算属性 vs methods 方法计算属性完整写法 综合案例#xff1a;成绩案例 计算属性
概念#xff1a;基于现有的数据#xff0c;计算出来的新属性。依赖的数据变化#xff0c;自动重新计算 语法: ①声明computed配置项中#xff0c;一个计算属性… 文章目录 计算属性computed 计算属性 vs methods 方法计算属性完整写法 综合案例成绩案例 计算属性
概念基于现有的数据计算出来的新属性。依赖的数据变化自动重新计算 语法: ①声明computed配置项中一个计算属性对应一个函数 ②使用起来和普通属性一样使用{{ 计算属性名 }} (平时声明属性是往data中放的现在要往对应的computed中放)
scriptcomputed:{计算属性名 () {基于现有数据编写求职逻辑return 结果}
/script计算属性 → 可以将一段求值的代码进行封装所以写的时候千万不要忘记return
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapph3物品清单/h3tabletrth名字/thth数量/th/trtr v-for(item,index) in list :keyitem.idtd{{ item.name }}/tdtd{{ item.num }}/td/tr/tablep礼物总数 {{ totalCount }}个/p/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el:#app,data:{//现有数据list:[{id:1,name:篮球,num:1},{id:2,name:玩具,num:2},{id:3,name:铅笔,num:5},]},computed:{totalCount(){//基于现有的数据编写求职逻辑//计算属性函数内部可以直接通过this 访问到 app 实例//需求对 this.list 数组里面的 num 进行求和 → reducelet total this.list.reduce((sum,item) sumitem.num,0)// 0 是求和的起始值会先给到sum return total}}})/script
/body
/htmlcomputed 计算属性 vs methods 方法
1computed 计算属性 作用:封装了一段对于数据的处理求得一个结果。 语法 ①写在computed配置项中 ②作为属性直接使用 → this.计算属性 {{ 计算属性 }} 缓存特性提升性能) 计算属性会对计算出来的结果缓存再次使用直接读取缓存依赖项变化了会自动重新计算 → 并再次缓存 2methods方法 作用给实例提供一个方法调用以处理业务逻辑 语法 ①写在methods配置项中 ②作为方法需要调用 → this.方法名 {{ 方法名( ) }} (因为是方法所以用起来是要调用的) 除非配合着事件相当于帮你调用 → 事件名“方法名”
用方法
methods:{totalCountFn () {console.log(methods方法执行了)let total this.list.reduce((sum,item) sumitem.num,0)return total}
}算完一个又算一次是没有缓存的
计算属性完整写法
Q:上一点我们是访问计算属性那么应该也能修改了
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp姓input typetext v-modelfirstName名input typetext v-modellastNamespan{{ fullName }}/spanbutton clickchangeName改名卡/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el:#app,data:{firstName:刘,lastName:备,},methods:{changeName(){this.fullName周心悦//会传给我们当前 set 方法的形参value}},computed:{//简写 → 获取没有配置设置的逻辑//fullName(){// return this.firstName this.lastName//}//完整写法 → 获取 设置fullName:{//(1)当fullName计算属性被获取求值时执行get有缓存// 会将返回值作为求值的结果get (){return this.firstName this.lastName},//2当fullName计算属性被修改赋值时执行set// 修改的值传递给set方法的形参set (value){//改名卡的用法时把输入的姓名拆分分别给“姓”和“名”this.firstNamevalue.slice(0,1)this.lastNamevalue.slice(1)}}}})/script
/body
/html综合案例成绩案例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappdiv classtabletablethead/theadtbody v-iflist.length 0tr v-for(item,index) in list :keyitem.idtd{{ index 1 }}/td!-- 为保证序号连续推荐使用index --td{{ item.subject }}/td!-- 需求不及格的要标红及60,加上red类 --td :class{ red:item.score60 }{{ item.score }}/tdtda click.prenvetdel(item.id) href#删除/a/td/tr/tbodytbody v-elsetrtd colspan5span classnone暂无数据/span/td/tr/tbodytfoottrtd colspan5span总分{{ totalScore }}/spanspan stylemargin-left: 50px;平均分{{ averageScore }}/span/td/tr/tfoot/table/divdiv classformdiv classform-itemdiv classlabel科目/divdiv classinputinput typetext placeholder请输入科目 v-model.trimsubject/div/divdiv classform-itemdiv classlabel分数/divdiv classinputinput typetext placeholder请输入分数 v-model.numberscore/div/divdiv classform-itemdiv classlabel/divdiv classinputbutton clickadd classsubmit添加/button/div/div/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el:#app,data:{list:[{ id: 1,subject:语文, score:20},{ id: 7,subject:数学, score:90},{ id: 12,subject:英语, score:70},],subject:,score:},computed:{totalScore(){return this.list.reduce((sum,item) sum item.score,0)},averageScore (){if(this.list.length 0){return 0}return (this.totalScore/this.list.length).toFixed(2)}},methods:{del(id){//相同的移出不相同的保留this.list this.list.filter(item item.id ! id)},add(){if(!this.subject){alert(请输入科目)return}if(typeof this.score ! number){alert(请输入正确的成绩)return}//往前面加this.list.unshift({id: new Date(),subject:this.subject,score:this.score})this.subjectthis.score}}})/script
/body
/html
