Vue的计算属性及监视

Vue的计算属性

计算属性

computed属性对象中定义计算属性的方法,在页面中使用{{方法名}}来显示计算的结果。

<body>
    <div id="app">
        姓:<input type="text" placeholder="First Name" v-model="firstName">
        <br>
        名:<input type="text" placeholder="Last Name" v-model="lastName">
        <br>
        姓名1(单向):<input type="text" placeholder="Full Name1" v-model="fullName1">
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'A',
            lastName: 'B',
        },
        computed: {
            // 计算属性中的一个方法,方法的返回值作为属性值
            fullName1() {
                return this.firstName + ' ' + this.lastName
            }
        }
    })
</script>

计算属性的监视

  1. 使用watch属性对象实现对计算属性的监视

    <body>
        <div id="app">
            姓:<input type="text" placeholder="First Name" v-model="firstName">
            <br>
            名:<input type="text" placeholder="Last Name" v-model="lastName">
            <br>
            姓名2(单向):<input type="text" placeholder="Full Name1" v-model="fullName2">
        </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstName: 'A',
                lastName: 'B',
                fullName2: 'A B'
            },
    
            watch: { // 配置监视
                firstName: function (newVal, oldVal) {
                    // firstName发生变化,执行的回调函数
                    this.fullName2 = newVal + ' ' + this.lastName
                }
            }
        })
    </script>
    
  2. 使用Vue的实例方法$watch监视计算属性

    <body>
        <div id="app">
            姓:<input type="text" placeholder="First Name" v-model="firstName">
            <br>
            名:<input type="text" placeholder="Last Name" v-model="lastName">
            <br>
            姓名3(单向):<input type="text" placeholder="Full Name1" v-model="fullName3">
        </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstName: 'A',
                lastName: 'B',
                fullName3: 'A B'
            },
        })
    
    	// 监视this.lastName,发生改变时,更新fullName3的值
        vm.$watch('lastName', function (newVal, oldVal) {
            this.fullName3 = this.firstName + ' ' + newVal
        })
    </script>
    
  3. 使用setter/getter方法监视计算属性

    通过getter\setter实现对属性数据的显示和监视,计算属性存在缓存,多次读取只执行一次getter计算。此方法能够实现数据的双向绑定

    <body>
        <div id="app">
            姓:<input type="text" placeholder="First Name" v-model="firstName">
            <br>
            名:<input type="text" placeholder="Last Name" v-model="lastName">
            <br>
            姓名3(双向):<input type="text" placeholder="Full Name3" v-model="fullName3">
        </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstName: 'A',
                lastName: 'B',
            },
            computed: {
                // setter和getter双向绑定
                fullName3: {
                    get() {
                        return this.firstName + ' ' + this.lastName
                    },
                    set(value) {
                        let names = value.split(' ')
                        this.firstName = names[0]
                        this.lastName = names[1]
                    }
                }
            }
        })
    </script>
    

    get()当需要读取当前属性值时执行,根据相关数据计算并返回当前属性的值

    set(value)监视当前属性值的变化,当属性值发生变化时执行,更新相关的属性数据,value为新的属性值

相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页