vue计算属性computed中的get和set的使用

我不是女神ヾ 2023-05-22 22:10 10阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue之computed(计算属性)详解get()、set()</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            姓：<input type="text" placeholder="firstName" v-model="firstName"><br>
            名：<input type="text" placeholder="lastName" v-model="lastName"><br>
            姓名1(单向):<input type="text" placeholder="FullName1" v-model="fullName1"><br>
            姓名2(双向):<input type="text" placeholder="FullName2" v-model="fullName3"><br>
        </div>
    
        <script>
            const demo = new Vue({ 
                el: '#app',
                data: { 
                    firstName: 'A',
                    lastName: 'B',
                    fullName2: 'A B'
                },
                computed: { 
                    //计算属性相当于data里的属性
                    //什么时候执行：初始化显示/ 相关的data属性发生变化
                    fullName1: { //计算属性中的get方法，方法的返回值就是属性值
                        get() { 
                            return this.firstName + '---' + this.lastName
                        },
                        set(val) {  }
                    },
    
                    fullName3: { 
                        get() { //回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
                            return this.firstName + ' ' + this.lastName
                        },
                        set(val) { //监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
                            //val就是fullName3的最新属性值
                            console.log(val)
                            const names = val.split(' ');
                            console.log(names)
                            this.firstName = names[0];
                            this.lastName = names[1];
                        }
                    }
                }
    
            })
    
    
        </script>
    </body>
    
    </html>

html代码：

<div id="app">
            <ul>
                <li><span><input type="checkbox" v-model="allcheck" /></span>全选</li><br />
                <li v-for="item in datalist"><span><input type="checkbox" v-model="item.status" /></span>{
       {item.xueli}}</li>
            </ul>
            <input type="button" value="批量操作" />
        </div>

js代码