<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>菜鸟教程(runoob.com)</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="demo">
姓:<input type="text" placeholder="First Name" v-model="firstname"/><br>
名:<input type="text" placeholder="Last Name" v-model="lastname"> <br>
姓名3(双向):<input type="text" placeholder="Full Name3" v-model="fullName3"> <br/>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#demo',
data: {
firstname: 'A',
lastname: 'B',
},
computed:{
//在计算中这个就不是一个函数了,而是一个属性
fullName3: {
//回调函数,计算并返回当前属性的值
//回调函数定义,1.你定义的 2.你没有调用 3.但最终他执行了
get() {//回调函数:当需要读取相关属性值时回调,根据相关的数据计算并返回当前属性的值
console.log("123")
return this.firstname+' '+this.lastname
},
set(value){//回调函数:当属性值发生改变时回调,更新相关的属性数据
const vm =value.split(' ')
console.log(vm)
this.firstname = vm[0]
this.lastname = vm[1]
}
},
}
//
})
vm.$watch('lastname', function(value){//这个是对实体的一个监视通过里边的函数实现
//更新fullName2
this.fullName2 = this.firstname+' '+value
})
</script>
</body>
</html>
vue之计算属性之get、set
最新推荐文章于 2024-04-02 10:13:11 发布