Vue中计算属性的getter跟setter

最新推荐文章于 2023-05-24 18:32:41 发布

文鼎鼎

最新推荐文章于 2023-05-24 18:32:41 发布

阅读量784

点赞数 1

分类专栏： vue计算属性文章标签： vue

本文链接：https://blog.csdn.net/killbee365/article/details/105869218

版权

vue计算属性专栏收录该内容

3 篇文章 0 订阅

订阅专栏

每个计算属性都包含一个getter跟一个setter

当你没有set方法的时候那么你的计算属性就只有只读属性，不能被更改，set方法可以省略，当你计算属性设为只读属性的时候，get也可以省略。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="./base/vue.js"></script>
<body>
    <div id="app">
        <input type="text" v-model="computedNum">
        <p>{{msg}}</p>
    </div>
</body>
<script>
        new Vue({
            el:"#app",
            data:{
                msg:"hello "
            },
            computed:{ //声明计算属性
                computedNum(){
                    return this.msg
                }
            }
        })
</script>
</html>

当你想要用以上方法更改输入框的值实现双向绑定更改p标签的值的时候，你会发现控制台会给你报错，说你的计算属性没有setter这个方法
在这里插入图片描述

那我们就需要用到setter这个方法
我们只需将里面计算属性那一部分更改为

				computedNum:{
                    get(){
                        return this.msg
                    },
                    set(val){
                        this.msg = val
                    }
                }

在set方法中将需要更改的值传递进去并且进行赋值操作再由get方法返回出去就可以实现数据的双向绑定更改
在这里插入图片描述

文鼎鼎

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中计算属性的getter跟setter

每个计算属性都包含一个getter跟一个setter当你没有set方法的时候那么你的计算属性就只有只读属性，不能被更改，set方法可以省略，当你计算属性设为只读属性的时候，get也可以省略。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me...
复制链接

扫一扫