辽宁网站建设电话,用wp系统做网站,个人博客网页完整代码,百度竞价个人开户文章目录 计算属性computed3.1 概述3.2 使用3.3 计算属性vs方法Methods3.4 计算属性的完整写法 计算属性computed
3.1 概述
基于现有的数据#xff0c;计算出来的新属性。 依赖的数据变化#xff0c;自动重新计算
语法#xff1a;
声明在 computed 配置项中#xff0c;… 文章目录 计算属性computed3.1 概述3.2 使用3.3 计算属性vs方法Methods3.4 计算属性的完整写法 计算属性computed
3.1 概述
基于现有的数据计算出来的新属性。 依赖的数据变化自动重新计算
语法
声明在 computed 配置项中一个计算属性对应一个函数使用起来和普通属性一样使用 {{ 计算属性名}}
注意事项
computed配置项和data配置项是同级的computed中的计算属性虽然是函数的写法但他依然是个属性computed中的计算属性不能和data中的属性同名使用computed中的计算属性和使用data中的属性是一样的用法computed中计算属性内部的this依然指向的是Vue实例
scriptconst app new Vue({el: #app,data: {// 现有的数据},//computed和data同级computed: {totalCount () {}}/script3.2 使用
styletable {border: 1px solid #000;text-align: center;width: 240px;}th,td {border: 1px solid #000;}
/style
bodydiv idapptabletrth名字/thth数量/th/trtr v-for(item, index) in list :keyitem.idtd{{ item.name }}/tdtd{{ item.num }}个/td/tr/table!-- 目标统计求和求得礼物总数 --p礼物总数{{ totalCount }} 个/p/div
/body
script srcjs/vue.js/script
scriptconst 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 实例//console.log(this.list)//需求:对this.list数组里面的num进行求和→reducelet total this.list.reduce((sum, item)sumitem.num,0)return total}}})
/script3.3 计算属性vs方法Methods
computed计算属性 作用封装了一段对于数据的处理求得一个结果 语法 写在computed配置项中作为属性直接使用 js中使用计算属性 this.计算属性模板中使用计算属性{{计算属性}}
methods计算属性 作用给Vue实例提供一个方法调用以处理业务逻辑。 语法 写在methods配置项中作为方法调用 js中调用this.方法名()模板中调用 {{方法名()}} 或者 事件名“方法名”
计算属性的优势: 缓存特性提升性能 计算属性会对计算出来的结果缓存再次使用直接读取缓存 依赖项变化了会自动重新计算 → 并再次缓存 methods没有缓存特性
styletable {border: 1px solid #000;text-align: center;width: 300px;}th, td {border: 1px solid #000;}h3 {position: relative;}
/style
bodydiv idapph3666666span{{ totalCountFn() }}/span/h3h3666666span{{ totalCountFn() }}/span/h3h3666666span{{ totalCountFn() }}/span/h3h3666666span{{ totalCountFn() }}/span/h3tabletrth名字/thth数量/th/trtr v-for(item, index) in list :keyitem.idtd{{ item.name }}/tdtd{{ item.num }}个/td/tr/tablep礼物总数{{ totalCountFn() }} 个/pp礼物总数{{ totalCount}} 个/p/div
/body
script srcjs/vue.js/script
scriptconst app new Vue({el: #app,data: {// 现有的数据list: [{ id: 1, name: 篮球, num: 3 }, { id: 2,name: 足球, num: 2 }, { id: 3, name: Java编程, num: 5 },]},methods: {totalCountFn() {console.log(methods方法执行了)//执行五次let total this.list.reduce((sum, item) sum item.num, 0)return total}},computed: {// 计算属性有缓存的一旦计算出来结果就会立刻缓存// 下一次读取 → 直接读缓存就行 → 性能特别高totalCount() {console.log(totalCount计算属性执行了)//执行1次let total this.list.reduce((sum, item) sum item.num, 0)return total}}})
/script3.4 计算属性的完整写法
计算属性默认的简写只能读取访问不能 “修改”如果要 “修改” → 需要写计算属性的完整写法
styleinput {width: 30px;}
/style
bodydiv idapp姓input typetext v-modelfirstName 名input typetext v-modellastName span{{fullName}}/spanbutton clickchangeName()改名卡/button/divscript srcjs/vue.js/scriptscriptconst app new Vue({el: #app,data: {firstName: 李,lastName: 白,},methods: {changeName() {this.fullName 你好}},computed: {// 简写 → 获取没有配置设置的逻辑// fullName () {// return this.firstName this.lastName// }// 完整写法 → get()获取 set()设置fullName: {//(1)当fullName计算属性被获取求值时//执行get有缓存优先读缓存//会将返回值作为求值的结果get() {return this.firstName this.lastName},//(2)当fullName计算属性被修改赋值时执行set//修改的值传递给set方法的形参set(value) {//当点击执行changeName()方法后//‘你好’会传给形参valuethis.firstName value.slice(0, 1)this.lastName value.slice(1)}}}})/script
/body
