三、Vue成员
一、分隔符成员
1. 作用
修改插值表达式符号
2. 代码
delimeters: ['[{', '}]']
二、过滤器成员
1. 特点
a. 在filters成员中定义过滤器方法
b. 可以对多个值进行过滤，过滤时还可以额外传入辅助参数。
c. 过滤的结果可以进行下一次过滤（过滤的串联）
2. 过滤器示例
<body>
<div id="app">
<p>{{ num | f1 }}</p>
<p>{{ a, b | f2(30, 40) | f3 }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10,
a: 10,
b: 20,
},
filters: {
// 传入所有要过滤的条件，返回值就是过滤的结果
f1 (num) {
console.log(num);
return num * 10;
},
f2 (a, b, c, d) {
console.log(a, b, c, d);
return a + b + c + d;
},
f3 (num) {
return num * num;
}
}
})
</script>
三、计算属性成员
1. 特点
a. computed计算属性可以声明方法属性（方法属性一定不能在data中重复声明）
b. 方法属性必须在页面中渲染，才会启用绑定的方法，方法属性的值就是绑定方法的返回值
c. 绑定的方法中出现的所有变量都会被监听，任何一个变化发生值更新都会重新出发绑定方法，从而更新方法属性的值
2. 针对的问题
一个变量值依赖于多个变量值
3. 示例
<body>
<div id="app">
<input type="number" min="0" max="100" v-model="n1">
+
<input type="number" min="0" max="100" v-model="n2">
=
<button>{{ result }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
n1: '',
n2: '',
},
computed: {
result () {
console.log('被调用了');
n1 = +this.n1;
n2 = +this.n2;
return n1 + n2;
}
}
})
</script>
四、监听属性成员
1. 特点
a. 监听的属性需要在data中声明，监听方法不需要返回值
b. 监听的方法名就是监听的属性名，该属性值发生更新时就会回调监听方法
c. 监听方法有两个回调参数：当前值，上一次值
2. 针对的问题
多个变量值依赖于一个变量值
3. 示例
<body>
<div id="app">
<p>姓名：<input type="text" v-model="full_name"></p>
<p>姓：{{ first_name }}</p>
<p>名：{{ last_name }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '未知',
last_name: '未知',
},
watch: {
full_name(n, o) {
name_arr = n.split('');
this.first_name = name_arr[0];
this.last_name = name_arr[1];
},
}
})
</script>
