计算属性 vue.js

最新推荐文章于 2023-05-02 10:25:11 发布

林衍丶

最新推荐文章于 2023-05-02 10:25:11 发布

阅读量215

点赞数 1

分类专栏： vue.js 文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/linyan12138/article/details/120172407

版权

vue.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文用两个input输入框来输入字符，实时获取并输出其合并在一起的内容来作为例子讲解。

1. 直接获取data中的数据将其合并：

<body>
    <div class="demo">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        <h2>{{firstName+lastName}}</h2>
    </div>


    <script>
        var demo = new Vue({
            el: '.demo',
            data: {
                firstName: '张',
                lastName: '三'
            }
        })
    </script>
</body>

输出的结果是这样的

通过v-model来建立数据的双向绑定，实时的更新firstName和lastName，并将其进行合并输入。

2.通过methods将其合并

<body>
    <div class="demo">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        <h2>{{add()}}</h2>
    </div>


    <script>
        var demo = new Vue({
            el: '.demo',
            data: {
                firstName: '张',
                lastName: '三'
            },
            methods: {
                add() {
                    name = this.firstName + this.lastName
                    return name
                }
            }
        })
    </script>
</body>

运用方法将this.firstName和this.lastName合并在一起并返回，调用方法时就能得到合并的值了。

3.运用计算属性来实现合并：

<body>
    <div class="demo">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        <h2>{{name}}</h2>
    </div>


    <script>
        var demo = new Vue({
            el: '.demo',
            data: {
                firstName: '张',
                lastName: '三'
            },
            computed: {
                name: {
                    get() {
                        return this.firstName + this.lastName
                    }
                }
            }
        })
    </script>
</body>

此时的this是指向的demo，所以可以在get中获取到firstName和lastName

计算属性和方法看起来类似，但各有千秋，如计算属性中的get的调用时间：

1.name初次被调用时。

2.name所依赖的数据发生了改变时。

这是由于在初次调用时对数据进行了缓存，所以不会反复调用，而如果将他写在方法中，那么执行一次就会调用一次，不会进行缓存。

4.计算属性的简写方法：

<body>
    <div class="demo">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        <h2>{{name}}</h2>
    </div>


    <script>
        var demo = new Vue({
            el: '.demo',
            data: {
                firstName: '张',
                lastName: '三'
            },
            computed: {
                name() {
                    return this.firstName + this.lastName
                }
            }
        })
    </script>
</body>