0
点赞
收藏
分享

微信扫一扫

vue08-computed get与set方法

苦茶如歌 2022-10-25 阅读 183


上篇博客,只用了computed的get方法,获取计算属性的值。set方法为给计算属性赋值时执行的方法

<!DOCTYPE html>
<html lang=en>

<head>
<meta charset="utf-8" />
<title>Hello world</title>
<script src="vue.js"></script>
</head>

<body>
<div id="root">
{{fullName}}
</div>


<script>
var vm = new Vue({
el: "#root",
data: {
firstName: "xu",
lastName: "haixing"
},
computed: {
fullName: {
get: function () {
return this.firstName + " " + this.lastName;
},
set: function (value) {
var arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
console.log("value" + value);
}
}
}
})

</script>
</body>

</html>

例子中,firstName与lastName改变会计算fullName值,fullName改变也会计算fistName与lastName值。看演示效果:

vue08-computed get与set方法_computed

 

 

举报

相关推荐

0 条评论