Vue.js框架学习—计算属性_let datai = $(this).attr('data-idx')?+$(this).attr-CSDN博客

本文链接：https://blog.csdn.net/weixin_45237668/article/details/127154181

在这里插入图片描述

一、要实现的页面效果

在这里插入图片描述

二、分别通过插值语法、methods方法、计算属性实现

1.插值语法

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        全名：<span>{{firstName}}-{{lastName}}</span>
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            firstName:'李',
            lastName:'四'
        }
    })
</script>

模板中用插值语法，虽然比较方便，但是只能用来做简单的操作，如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。

2.methods方法

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        全名：<span>{{fullName()}}</span>
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            firstName:'李',
            lastName:'四'
        },
        methods:{
            fullName(){
                return this.firstName+'-'+this.lastName
            }
        }
    })
</script>

同样，用methods方法也能实现一样的效果，但方法调用总是会在重渲染发生时再次执行函数，因此增加了计算量。

3.计算属性

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        全名：<span>{{fullName}}</span>
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            firstName:'李',
            lastName:'四'
        },
        computed:{
            fullName(){
                return this.firstName+'-'+this.lastName
            }
        }
    })
</script>