网站解析,秦皇岛网站制作报价,餐饮公司 网站建设,呼和浩特网站建设费用目录 一、今日学习目标1.computed计算属性 二、computed计算属性1.概念2.语法3.注意4.案例5.代码准备 三、computed计算属性 VS methods方法1.computed计算属性2.methods计算属性3.计算属性的优势4.总结 四、计算属性的完整写法五、综合案例-成绩案例六、Computed计算属性总结 … 目录 一、今日学习目标1.computed计算属性 二、computed计算属性1.概念2.语法3.注意4.案例5.代码准备 三、computed计算属性 VS methods方法1.computed计算属性2.methods计算属性3.计算属性的优势4.总结 四、计算属性的完整写法五、综合案例-成绩案例六、Computed计算属性总结 一、今日学习目标
1.computed计算属性
基础语法计算属性vs方法计算属性的完整写法成绩案例
二、computed计算属性
1.概念
基于现有的数据计算出来的新属性。 依赖的数据变化自动重新计算。
2.语法
声明在 computed 配置项中一个计算属性对应一个函数使用起来和普通属性一样使用 {{ 计算属性名}}
3.注意
computed配置项和data配置项是同级的computed中的计算属性虽然是函数的写法但他依然是个属性computed中的计算属性不能和data中的属性同名使用computed中的计算属性和使用data中的属性是一样的用法computed中计算属性内部的this依然指向的是Vue实例
4.案例
比如我们可以使用计算属性实现下面这个业务场景
5.代码准备
styletable {border: 1px solid #000;text-align: center;width: 240px;}th,td {border: 1px solid #000;}h3 {position: relative;}/stylediv idapph3小黑的礼物清单/h3tabletrth名字/thth数量/th/trtr v-for(item, index) in list :keyitem.idtd{{ item.name }}/tdtd{{ item.num }}个/td/tr/table!-- 目标统计求和求得礼物总数 --p礼物总数? 个/p/divscript srchttps://cdn.jsdelivr.net/npm/vue2/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 },]}})/script三、computed计算属性 VS methods方法
1.computed计算属性
作用封装了一段对于数据的处理求得一个结果
语法
写在computed配置项中作为属性直接使用 js中使用计算属性 this.计算属性模板中使用计算属性{{计算属性}}
2.methods计算属性
作用给Vue实例提供一个方法调用以处理业务逻辑。
语法
写在methods配置项中作为方法调用 js中调用this.方法名()模板中调用 {{方法名()}} 或者 事件名“方法名”
3.计算属性的优势 缓存特性提升性能 计算属性会对计算出来的结果缓存再次使用直接读取缓存 依赖项变化了会自动重新计算 → 并再次缓存 methods没有缓存特性 通过代码比较
styletable {border: 1px solid #000;text-align: center;width: 300px;}th,td {border: 1px solid #000;}h3 {position: relative;}span {position: absolute;left: 145px;top: -4px;width: 16px;height: 16px;color: white;font-size: 12px;text-align: center;border-radius: 50%;background-color: #e63f32;}/stylediv idapph3小黑的礼物清单span?/span/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/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {// 现有的数据list: [{ id: 1, name: 篮球, num: 3 },{ id: 2, name: 玩具, num: 2 },{ id: 3, name: 铅笔, num: 5 },]},computed: {totalCount () {let total this.list.reduce((sum, item) sum item.num, 0)return total}}})/script4.总结
1.computed有缓存特性methods没有缓存
2.当一个结果依赖其他多个值时推荐使用计算属性
3.当处理业务逻辑时推荐使用methods方法比如事件的处理函数
四、计算属性的完整写法
既然计算属性也是属性能访问应该也能修改了
计算属性默认的简写只能读取访问不能 “修改”如果要 “修改” → 需要写计算属性的完整写法 完整写法代码演示 div idapp姓input typetext v-modelfirstName 名input typetext v-modellastName span/spanbrbr button改名卡/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {firstName: 刘,lastName: 备},computed: {},methods: {}})/script五、综合案例-成绩案例 功能描述
1.渲染功能
2.删除功能
3.添加功能
4.统计总分求平均分
思路分析
1.渲染功能 v-for :key v-bind:动态绑定class的样式
2.删除功能 v-on绑定事件 阻止a标签的默认行为
3.v-model的修饰符 .trim、 .number、 判断数据是否为空后 再添加、添加后清空文本框的数据
4.使用计算属性computed 计算总分和平均分的值
六、Computed计算属性总结
computed计算属性是Vue.js中的一个特殊属性用于对数据进行计算和处理并返回一个新的值。它的特点是能够根据数据的变化自动更新计算结果并且可以缓存计算结果以提高性能。
使用computed属性可以将复杂的计算逻辑分解成多个简单的步骤使代码更加清晰和可维护。
computed属性可以像普通属性一样在模板中使用而不需要在Vue实例中额外定义和更新。
computed属性的语法格式为
computed: { propName: function() { // 通过this访问Vue实例的数据 return /* 计算结果 */; } }
其中propName是计算属性的名称可以在模板中使用。
computed属性内部的函数可以使用this关键字来访问Vue实例的数据通过计算这些数据可以得到一个新的值并返回。
在模板中使用计算属性时可以像访问普通属性一样使用计算属性的名称。
computed属性会根据它所依赖的数据的变化而自动重新计算只要依赖的数据发生变化计算属性就会重新计算并更新模板中的值。
computed属性还有一个重要的特性是它会缓存计算结果在依赖的数据没有发生变化时计算属性会直接返回缓存的结果而不会重新计算。这样可以提高性能避免不必要的计算。
需要注意的是computed属性只有在模板中使用时才会被计算和更新如果在代码中直接访问计算属性的值不会触发计算属性的计算和更新。
总之computed计算属性是Vue.js中一种非常有用的功能可以简化复杂的计算逻辑提高代码的可读性和可维护性同时也能提高性能避免不必要的计算。
