vue computed
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src='js/bower_components/vue/dist/vue.js'></script>
</head>
<body>
<script type="text/javascript">
var a=new Vue(
{
el:'body',
data:{
a:10,
b:20
},
computed:{
c:
{
get:function()
{
return this.w;
},
set:function(v)
{
this.w=v+this.a;
}
}
}
}
);
a.c=666;
console.log(a.c);
</script>
</body>
</html>解释：
在这里插入图片描述
a代表
在这里插入图片描述
c代表
在这里插入图片描述
结果为什么是这样子的676？ 因为a.c=666;其中666赋值给了v，然后在set里面计算，然后再get里面读取输出
效果：
在这里插入图片描述
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src='js/bower_components/vue/dist/vue.js'></script>
</head>
<body>
<script type="text/javascript">
var a=new Vue(
{
el:'body',
data:{
a:10,
b:20
},
computed:{
c:
{
get:function()
{
return 666;
},
set:function(v)
{
this.w=v+this.a;
}
}
}
}
);
console.log(a.c);
</script>
</body>
</html>解释：
因为没有赋值给v那里，所以set里面用不上，
在这里插入图片描述
所以直接读取，然后直接输出666
效果：
在这里插入图片描述
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-02-18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录