vue基础学习(1.2)：vue的计算属性和监视

朱雀 2023-07-01 13:58 119阅读 0赞

# 1. 计算属性 #

1.  使用computed属性去定义计算属性的方法；
2.  html页面中，可以使用\{ \{方法名\}\}显示计算结果；
3.  高级用法：可以使用get()和set(value)方法实现对属性数据的展示和监视，  
    注意：计算属性存在缓存，多次读取只执行一次get计算。

# 2. 监视属性 #

1.  watch可以来监视指定的属性；
2.  vm的对象$watch()也可以用来监视；
3.  所谓监视，就是说当监视的属性发生变化时，回调函数将自动调用。

# 3. 编码 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>计算属性</title>
    </head>
    <body>
    <div id="name">
        姓: <input type="text" v-model="firstName"><br>
        名: <input type="text" v-model="lastName"><br>
        姓名（计算属性实现 单向）: <input type="text" v-model="fullName1"><br>
        姓名（监视属性实现 单向）: <input type="text" v-model="fullName2"><br>
        姓名（监视属性实现 双向）: <input type="text" v-model="fullName3"><br>
    </div>
    <script src="./js/vue.js"></script>
    <script> const vm = new Vue({ el: "#name", data: { firstName: "Xiao", lastName: "Ming", //如果有了计算属性，data中就不用写了 // fullName1:"Xiao Ming", fullName2: "Xiao Ming" }, //计算属性 computed: { //调用：初始化显示调用一次，当相关的data属性的数据发生变化时就会调用 fullName1() { //计算属性中的一个方法，方法的返回值作为属性值 return this.firstName + " " + this.lastName; }, fullName3: { //回调函数，需要展示时，调用；当相关的属性数据改变时，调用 get() { return this.firstName + " " + this.lastName; }, //回调函数，value是fullName3的最新属性值，当属性值改变时，调用去更新相关的属性值 set(value) { let split = value.split(" "); this.firstName = split[0]; this.lastName = split[1]; } } }, //监视属性 watch: { firstName: function (value) { this.fullName2 = value + " " + this.lastName; }, lastName: function (value) { this.fullName2 = this.firstName + " " + value; } } }); //第二种监听方式 监听方法 // vm.$watch("lastName", function (value) { // this.fullName2 = this.firstName + " " + value; // }) </script>
    
    </body>
    </html>