Vue3.x系列 计算属性computed

1、计算属性computed

作用：

计算属性比较适合多个变量或者对象进行处理后返回一个结果值，

多个变量中的某一个值发生变化，则绑定的计算属性也会发生变化

2、计算属性的getter 和 setter方法

计算属性中每一个属性对应的都是一个对象

分别获取计算属性和设置计算属性，默认只有getter方法，可以简写

computed:{
     fullName:function(){
     }
}

默认情况下不能直接修改计算属性，如果需要修改计算属性，需要一个set方法

computed:{ 
      fullName:{
             get:function(){
             }
             set:function(){
             }
      }
}

getter() 需要使用return返回内容，setter()方法不需要，用来改变计算属性的内容

<body>
    <div id="app">
        <p>商品名称:{{ name }}</p>
        <p>商品价格:{{ price }}</p>
        <p>商品名称和价格 {{ namePrice }}</p>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const vm = Vue.createApp({
            data(){
                return{
                    name:"洗衣机",
                    price:'6800元'
                }
            },//计算属性
            computed:{
                namePrice:{
                    get:function(){
                        return this.name+"**"+this.price
                    },
                    set:function(newName){
                        var name = newName.split('')
                        this.name = names[0]
                        this.price = names[1]
                    }
                }
            }
        }).mount('#app');
    </script>
</body>