郑州软件公司排行榜,seo更新网站内容的注意事项,国内三大电商平台分析报告,大连做网站哪家好文章目录 前文提要代码需求描述插值语法实现methods实现 计算属性getter执行时间#xff1a;setter 计算属性简写形式#xff08;只读不改#xff0c;才能如此简写#xff09;slice截取元素#xff0c;限制输入字符数量 前文提要
本人仅做个人学习记录#xff0c;如有错… 文章目录 前文提要代码需求描述插值语法实现methods实现 计算属性getter执行时间setter 计算属性简写形式只读不改才能如此简写slice截取元素限制输入字符数量 前文提要
本人仅做个人学习记录如有错误请多包涵 代码需求描述
输入姓和名能够将二者结合起来输出姓和名之间使用’-符号分隔
插值语法实现
bodydiv idbox姓input typetext placeholder姓 v-model:valuefirstNamebr/br/名input typetext placeholder名 v-model:valuesecondNamebr/br/姓名{{firstName}}-{{secondName}}/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,data: {firstName:张,secondName:三,}})/script
/body其中v-model:value可以简写为v-model也就是’:value’可以省略掉 实现效果如下
methods实现
代码如下
bodydiv idbox姓input typetext placeholder姓 v-model:valuefirstNamebr /br /名input typetext placeholder名 v-model:valuesecondNamebr /br /姓名{{name()}}br /br /测试input typetext placeholder测试 v-model:valuennbr /br //divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,data: {firstName: 张,secondName: 三,nn:yi},methods: {name(){console.log(1)return this.firstName-this.secondName}}})/script
/bodymethods中的函数会被添加到Vue实例中因此可以直接在插值语法中调用。 data中的任何数据发生变化的时候Vue的模版都会被重新解析模版中含有methods中的name函数methods不管函数返回值有没有变化都会调用一次函数因此会多次调用name函数。 所以每次查看和修改姓和名都会调用一次该函数。 method中的函数没有写成箭头函数则可以从this指针这里访问Vue实例Vue实例中因为数据代理添加了data中的数据因此可以如此写。
呈现效果 每在名中添加、删除一次字符都会调用一次函数在控制台输出一次1。
就算修改的不是和函数返回值有关的属性也会调用函数
计算属性
将上文的代码修改为这样使用计算属性computed也可以起到上文的效果而且效率更高。
bodydiv idbox姓input typetext placeholder姓 v-model:valuefirstNamebr /br /名input typetext placeholder名 v-model:valuesecondNamebr /br /姓名{{name_}}br /br /测试input typetext placeholder测试 v-model:valuennbr /br //divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,data: {firstName: 张,secondName: 三,nn:yi},methods: {name(){return this.firstName-this.secondName}},computed:{name_:{get(){console.log(调用了get)return this.firstName-this.secondName},set(value){console.log(调用了set)const arrvalue.split(-)this.firstNamearr[0]this.secondNamearr[1]}}}})/script
/body呈现效果 代码解释 computed中的属性不能和methods中的函数名一致会出错。 set函数中无法直接通过firstName访问到data中的firstName必须通过this指针锁定Vue实例再进一步锁定firstName
计算属性中的属性是不存在的是使用其他的属性计算出来的这也是为什么叫做计算属性的原因。 原理底层借助了Object.defineproperty提供的getter和setter。
getter执行时间
1初次读取时会执行一次。 2当依赖的数据被改变时会再次调用。
注意点不要使用vm.data_.get()调用函数这是错误的
和methods方法不同当返回的数据没有发生变化的时候methods是会继续执行一遍了而computed内部含有缓存机制复用当没有触发get函数执行的时候有用到该计算属性的时候会直接从缓存中提取效率更高调试更加方便。
示例图片 当你修改的属性和计算属性中包含的属性全无关系的时候就算整个模版被重新解析methods中的函数重新执行computed中的计算属性也只会执行最开始的那次因为相关data属性没有发生变化
setter 当你对计算属性进行更改的时候会调用setter而和计算属性有关的属性发生变化的时候会触发调用get函数因此控制台会如此输出
计算属性简写形式只读不改才能如此简写
当你规定的计算属性只读不写则可以通过修改上文代码写成这样应用
computed:{name_:function(){console.log(调用了get)return this.firstName-this.secondName}
}注意要求只读不写别修改计算属性。 不过这还不是最简形式还可以进一步简化
computed:{name_(){console.log(调用了get)return this.firstName-this.secondName}
}注意name_不是函数依旧是属性。
slice截取元素限制输入字符数量
可以将getter中的代码改为下述样式
return this.firstName.slice(0,3)-this.secondName从而限制字符个数最少为0最多3个
示例图片 超过3个字符的无法记录到计算属性中。 至此结束。
如果你觉得这篇文章写的不错多多点赞~收藏吧
