计算属性 computed
在官网的计算属性中开头就说了模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。尤其在页面中大量使用逻辑表达式会对页面的可维护性造成一定的影响。
👇
<div id="app" v-cloak>
<ul>
<li v-for='item in Nan'>
{{item.name}}
</li>
</ul>
<hr>
{{RMB}}--{{USD}}
<hr>
<ul>
<li v-for='item in Nv'>
{{item.name}}
</li>
</ul>
</div>
new Vue({
el: "#app",
//计算属性
computed: {
//利用已有的数据生成新的变量，和data中的属性一样都可以被this获取
Nan() {
return this.userList.filter(r => r.gender === "男")
},
Nv() {
return this.userList.filter(r => r.gender === "女")
},
USD() {
return this.RMB / 6.7
}
},
data() {
return {
RMB: 10000,
userList: [{
id: 1,
name: 'WWW',
gender: '男'
},
{
id: 2,
name: 'HHH',
gender: '男'
},
{
id: 3,
name: 'KKK',
gender: '女'
},
]
}
},
})
这样做的好处就是可以简化页面模版而且如果数据是重复的，则可以自动缓存。
监听器 watch
watch来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时需要使用它，创建监听器通过watch属性，它是一个对象。 ⬇️
<div id="app" v-cloak>
<input type="text" v-model='keywords'>
<button @click='count--'>-</button>
{{count}}
<button @click='count++'>+</button>
</div>
new Vue({
el: "#app",
//监听器
watch: {
count(val) {
if (val <= 1) val = 1
else if (val >= 5) val = 5
this.count = val
},
//利用监听器做字段搜索
keywords(val) {
console.log('后台监听' + val);
}
},
data() {
return {
count: 1,
keywords:'',
}
}
})
对比computed而言在涉及到异步数据操作的时候，就只能用watch去实现了。
过滤器 filters
写项目的时候，需要将我们所使用的特定的一些字符进行一下过滤来出现在页面当中这就需要使用过滤器。例如：我下方代码中使用的0,1区分男女就用到了过滤器。过滤器还分为全局过滤器和局部过滤器。同时过滤器可以串联也可以接收参数。
//串联过滤器
{{ message | filterA | filterB }}
//过滤器是 JavaScript 函数，因此可以接收参数
{{ message | filterA('arg1', arg2) }}
🦐
<div id="app" v-cloak>
<ul>
<li v-for='item in Nan'>
{{item.name}}---{{item.gender | fmtGender}}
</li>
</ul>
<hr>
{{RMB |fmtMoney}}--{{USD | fmtMoney}}
<hr>
<ul>
<li v-for='item in Nv'>
{{item.name}}---{{item.gender | fmtGender}}
</li>
</ul>
</div>
//全局过滤器
Vue.filter('fmtMoney', (val) => {
//toFixed js自带方法保留2位小数
return val.toFixed(2)
})
new Vue({
el: "#app",
//局部过滤器
filters: {
fmtGender(val) {
// if(val===0)return '男'
// else if(val===1)return '女'
// return '多元化世界，和平待人'
let arr = ['男', '女']
// if (arr[val])
// return arr[val]
// else
// return '多元化世界，和平待人'
return arr[val] || '多元化世界，和平待人'
}
},
computed: {
Nan() {
return this.userList.filter(r => r.gender === 0)
},
Nv() {
return this.userList.filter(r => r.gender === 1)
},
USD() {
return this.RMB / 6.7
}
},
data() {
return {
RMB: 10000,
userList: [{
id: 1,
name: 'WWW',
gender: 0
},
{
id: 2,
name: 'HHH',
gender: 0
},
{
id: 3,
name: 'KKK',
gender: 1
},
]
}
},
})
