[Web 前端] 034 计算属性，侦听属性

目录

• 0. 方便起见，定个轮廓
• 1. 过滤器
• 2. 计算属性
  • 2.1
  • 2.2
• 3. 监听属性

0. 方便起见，定个轮廓

• 不妨记下方的程序为 code1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>v-xxx</title>
    <script src="./vue.js"></script>
    <style>
        /* c */
    </style>
</head>
<body>
    <div id="app">
        <!-- a -->
    </div>
    <script>
        // b
    </script>
</body>
</html>

1. 过滤器

• a 处改为以下代码

{{msg}} <br>
{{msg|capitalize}} <br>
{{price}} <br>
{{price|currency}} <br>

• b 处改为以下代码

new Vue({
    el: "#app",
    data: {
        msg: "hello",
        price: 20
    },
    filters: {
    	// 官网的例子
    	capitalize: function(val){
    		return val.charAt(0).toUpperCase() + val.slice(1);
    	},
    	currency: function(val){
    		return val + " $";
    	}
    }
});

2. 计算属性

2.1

• a 处改为以下代码

<!-- 当 a 发生变化时，输出 a+1 -->
<input type="text" v-model="a"> <br>
{{a+1}} <br>
{{parseInt(a)+1}} <br>
{{b}} <br>
{{c()}} <br>

• b 处改为以下代码

var vm = new Vue({
    el: "#app",
    data: {
        a: 1
    },
    computed: {
        // 写业务逻辑，有缓存
        b: function(){
            return parseInt(this.a) + 1;
        }
    },
    methods: {
        c: function(){
            return parseInt(this.a) + 1;
        }
    }
});

2.2

• a 处改为以下代码

<!-- 当 a 发生变化时，输出 a+1 -->
<input type="text" v-model="a"> <br>
{{b}} <br>

• b 处改为以下代码

var vm = new Vue({
    el: "#app",
    data: {
        a: 1
    },
    computed: {
        // 简单地说，设置时调用 set，输出时调用 get
        b: {
            // 默认就是 get 属性
            get: function(){
                return parseInt(this.a) + 1;
            },
            // 在控制台输入 vm.b = 10 运行照旧
            set: function(value){
                return this.a = value;
            }
        }
    }
});

3. 监听属性

• a 处改为以下代码

<input type="text" v-model="firstName">
<input type="text" v-model="lastName"> <br>
{{firstName + lastName}} <br>
{{fullName}} <br>
{{num}}

• b 处改为以下代码

new Vue({
    el: "#app",
    data: {
        firstName: "",
        lastName: "",
        num: 0
    },
    computed: {
        fullName: function(){
            return this.firstName + this.lastName;
        }
    },
    watch: {
        fullName: function(){
            this.num++;
        }
    }
});

---

此为听“北京图灵学院的 《Web 公开课》”时所记笔记

这个课我是断断续续地听的，笔记更是断断续续地整理的。。。

这个课前后有两个老师，宇哥（比较正经）和浩哥（比较激情）

宇哥的课到这儿“戛然而止了”，后边浩哥从零开始讲的，我听了一部分，但没记笔记。。。