1.3 Vue中的计算属性和侦听器

Posted torey

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了1.3 Vue中的计算属性和侦听器相关的知识,希望对你有一定的参考价值。

Vue中的计算属性和侦听器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Vue中的计算属性和侦听器</title>
    <!--1 引入Vue库-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记,视频地址: https://www.imooc.com/learn/980-->
        姓:<input v-model:value="firstName" />
        名:<input v-model:value="lastName" />
        <div>
            {{fullName}}
        </div>
        <div>
            {{count}}
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                firstName: ‘‘,
                lastName: ‘‘,
                count:0
            },
            computed: {//1 computed 是Vue中的计算属性,如果内容没有改变,则取上一次的计算结果,所以速度很快
                fullName: function () {
                    return this.firstName +   + this.lastName;
                }
            },
            watch: {//2 watch侦听器
                //监听fullName变化,一旦该fullName变化,则执行方法中内容
                fullName: function () {
                    this.count++
                }
            }
        });
    </script>
</body>
</html>

 

以上是关于1.3 Vue中的计算属性和侦听器的主要内容,如果未能解决你的问题,请参考以下文章

Vue中的计算属性computed和侦听器watch

Vue中的计算属性computed和侦听器watch

vue小技能:组件的 data 选项methods 选项计算属性侦听器

Vue中的计算属性和侦听属性

vue单文件组件(SFC)规范

Vue2.0笔记——计算属性和侦听器