栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

Vue 计算属性和使用的小技巧

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Vue 计算属性和使用的小技巧

1, 计算属性可以进行复杂的逻辑处理,只要返回一个结果就可以
2,每一个计算属性都有setter,getter
{{ fullName }}

var app =  new Vue({    el: '#app',    data : {        firstName: 'H',        lastName: 'L'
      },    computed: {        fullName: {             //  getter ,用于读取
            get : function () {                return this.firstName + ' ' +this.lastName  
              },            // setter , 写入时触发
              set : function (newValue) {                  var names = newValue.split(' ')                  this.firstName = names[0]                  this.lastName = names[names.length - 1]
              }
          }
      }
})

当执行 app.fullName = 'John Doe'时,setter就会被调用

小技巧:
(1),计算属性可以依赖其他计算属性
(2),计算属性不仅可以依赖当前的Vue实例的数据,还可以依赖其他实例的数据

同样在methods里定义的一个方法也可以实现同样的效果,为什么还要使用计算属性,因为一个计算属性是几句他的依赖缓存的,一个计算属性所依赖的数据发生变化是,它才会从新获取值。



作者:是归人不是过客
链接:https://www.jianshu.com/p/cd5929a7dc95


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/241154.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号