搜索到
1
篇与
的结果
-
计算属性 定义：要用的属性不存在，要通过已有属性计算得来原理：底层借助了Object.defineproperty方法提供的getter和setterget什么时候执行：初次读取时当依赖的属性发生改变时会被再次调用优点：与methods相比，内部有缓存机制（复用），效率更高，方便调试注：计算属性最终会出现在vm身上，直接读取使用即可； 如果计算属性要被修改，必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变；<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>姓名案例_计算属性实现（简写）</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> 姓：<input type="text" v-model="firstName"> <br><br> 名：<input type="text" v-model="lastName"> <br><br> 姓名：<span>{{fullName}}</span> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { firstName: '张', lastName: '三', }, computed: { //完整写法 /* fullName: { get() { console.log("get被调用了") return this.firstName + this.lastName; }, set(value) { console.log('set--->', value); const arr = value.split('-'); this.firstName = arr[0]; this.lastName = arr[1] } } */ //简写（考虑读取，不考虑修改时，才用简写方式） fullName() { console.log("get被调用了") return this.firstName + this.lastName; } } }) </script> </body> </html>
