Vue之computed(计算属性)详解get()、set()
<div id="demo">
姓:<input type="text" placeholder="firstName" v-model="firstName"><br>
名:<input type="text" placeholder="lastName" v-model="lastName"><br>
姓名1(单向):<input type="text" placeholder="FullName1" v-model="fullName1"><br>
姓名2(双向):<input type="text" placeholder="FullName3" v-model="fullName3"><br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const demo = new Vue({
el : '#demo',
data : {
firstName : 'A',
lastName : 'B',
fullName3 : 'A B'
},
computed : {//计算属性相当于data里的属性
//什么时候执行:初始化显示/ 相关的data属性发生变化
fullName1(){//计算属性中的get方法,方法的返回值就是属性值
return this.firstName + ' ' + this.lastName
},
fullName3 : {
get(){//回调函数 当需要读取当前属性值是执行,根据相关数据计算并返回当前属性的值
return this.firstName + ' ' + this.lastName
},
set(val){//监视当前属性值的变化,当属性值发生变化时执行,更新相关的属性数据
//val就是fullName3的最新属性值
console.log(val)
const names = val.split(' ');
console.log(names)
this.firstName = names[0];
this.lastName = names[1];
}
}
}
})
</script>
---------------------
作者:韩韩han
来源:CSDN
原文:https://blog.csdn.net/Hanhanyoona/article/details/81531290
版权声明:本文为博主原创文章,转载请附上博文链接!
- Vue学习笔记3.5 计算属性computed中的 get方法和set方法
- Vuejs computed set get计算属性
- 详解Vue的computed(计算属性)使用实例之TodoList
- vue计算属性get和set用法示例
- vue.js的computed,filter,get,set的用法及区别详解
- vue 计算属性 get 和set
- VUE学习第二周--计算属性computed
- vue教程2-03 vue计算属性的使用 computed
- vue中计算属性(computed)、methods和watched之间的区别
- vue 计算属性computed
- 在vue的计算属性computed中实现传参
- Vue计算属性computed简介及简单用法(表格筛选)
- vue中的计算属性实例详解
- VUE 关于父组件与子组件与路由与watch监听属性与computed计算属性 笔记
- Vue中使用方法、计算属性或观察者的方法实例详解
- vue.js 计算属性及计算属性(computed)、methods、watched三者区别
- vue:计算属性(computed)
- VUE学习之计算属性computed
- Vue的计算属性computed、方法methods、侦听器watch的区别
- vue.js计算属性computed用法实例分析