Vue-9-计算属性的属性

简介: Vue-9-计算属性的属性

计算属性的属性


默认的,计算属性实现了 getter 属性,我们可以直接拿到计算属性的值。但是如果尝试对计算属性的值进行修改,会成功吗?


网络异常,图片无法展示
|


如上,不出意外的在对计算属性进行 setter 操作的时候失败了,Vue 提示我们计算属性 infoc 没有 setter 属性。


实现计算属性的 setter 属性


代码-HTMl


<div id='app2'>
         {{ infoc }}
     </div>
复制代码


代码-JS


<script>
        var app2 = new Vue({
            el: "#app2",
            data: {
                msg1: "hello",
                msg2: "phyger",
                info: "hello phyger"
            },
            watch:{
                msg1: function(){
                    this.info = this.msg1 + ' ' + this.msg2
                },
                msg2: function(){
                    this.info = this.msg1 + ' ' + this.msg2
                }
            },
            computed: {
                infoc:{
                    get: function(){
                        return this.msg1+' '+this.msg2
                    },
                    set: function(newValue){
                        var temInfo = newValue.split(' ')
                        this.msg1=temInfo[0]
                        this.msg2=temInfo[temInfo.length-1]
                    }
                }
            }
        })
    </script>
复制代码


页面效果


网络异常,图片无法展示
|


可以看到,在计算属性中实现 setter 属性后,计算属性已经可以进行赋值操作了。而且在赋值过程中,msg1msg2 的值都发生了变化。


Tip


在计算属性中定义 setter 属性的时候,infoc 已经由原来的方法变成了方法的集合。且默认的 getter 属性也要重新定义。


不定义会如何?


如果不重新定义,则 Vue 对象会由于 Getter 属性的缺失而无法渲染:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin="anonymous" integrity="sha512-qRXBGtdrMm3Vdv+YXYud0bixlSfZuGz+FmD+vfXuezWYfw4m5Ov0O4liA6UAlKw2rh9MOYULxbhSFrQCsF1hgg==" src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
</head>
<body>
    <div id="app2">
        {{ infoc }}
    </div>
    <script>
        var app2 = new Vue({
            el: "#app2",
            data: {
                msg1: "hello",
                msg2: "phyger",
                info: "hello phyger"
            },
            watch:{
                msg1: function(){
                    this.info = this.msg1 + ' ' + this.msg2
                },
                msg2: function(){
                    this.info = this.msg1 + ' ' + this.msg2
                }
            },
            computed: {
                infoc:{
                    // get: function(){
                    //     return this.msg1+' '+this.msg2
                    // },
                    set: function(newValue){
                        var temInfo = newValue.split(' ')
                        this.msg1=temInfo[0]
                        this.msg2=temInfo[temInfo.length-1]
                    }
                }
            }
        })
    </script>
</body>
</html>
复制代码


网络异常,图片无法展示
|



将 get 属性的注释去掉


网络异常,图片无法展示
|


以上就是今天的全部内容了,感谢您的阅读,我们下节再会。

相关文章
|
2月前
|
缓存 JavaScript 前端开发
Vue.js计算属性:实现数据驱动的利器
Vue.js计算属性:实现数据驱动的利器
|
16天前
|
JavaScript
vue 批量绑定属性(你可能没这样用过 v-bind)
vue 批量绑定属性(你可能没这样用过 v-bind)
15 0
|
17天前
|
缓存 JavaScript C++
|
19天前
|
JavaScript
Vue computed自动计算对象中的属性
Vue computed自动计算对象中的属性
14 0
|
1月前
|
缓存 JavaScript
vue计算属性是什么 怎么选择?
vue计算属性是什么 怎么选择?
|
1月前
|
JavaScript
Vue模板语法、属性绑定、条件渲染的学习
Vue模板语法强调插值表达式需返回结果以显示。避免问题的方法是将逻辑处理放在JS中,不在模板内实现。Vue属性绑定使用`v-bind`(可简写为:)动态绑定类或ID,当值为null或undefined时自动移除。支持布尔类型和动态绑定多值。条件渲染包括`v-if`、`v-else`、`v-else-if`和`v-show`,其中`v-if`用于真值时渲染,`v-show`按条件显示,两者的区别在于频繁切换场景和渲染方式。
|
1月前
|
缓存 监控 JavaScript
Vue.js中的计算属性 computed 与监听属性 watch深入探索
Vue.js中的计算属性 computed 与监听属性 watch深入探索
54 0
|
2月前
|
缓存 JavaScript
Vue: 事件修饰符, 键盘事件, 鼠标事件,计算属性
Vue: 事件修饰符, 键盘事件, 鼠标事件,计算属性
37 2
|
2月前
|
JavaScript 安全 API
vue3注册添加全局实例属性的方法,如何在setup函数中调用
vue3注册添加全局实例属性的方法,如何在setup函数中调用
124 2