Vue的计算属性及监视

最新推荐文章于 2022-10-24 09:41:24 发布

整点薯条8

最新推荐文章于 2022-10-24 09:41:24 发布

阅读量180

点赞数

分类专栏：学习笔记文章标签： vue

本文链接：https://blog.csdn.net/m0_47354578/article/details/106498501

版权

学习笔记专栏收录该内容

33 篇文章 1 订阅

订阅专栏

文章目录

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>

计算属性的监视

使用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>

使用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>

使用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>