Vue过滤器(filters)的简单使用
Posted 桃花剑
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue过滤器(filters)的简单使用相关的知识,希望对你有一定的参考价值。
1、Vue过滤器的简单介绍
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
2、过滤器的简单运用(数据过滤)
把数据动态渲染到页面后,通过过滤器把年龄大于等于18的设置为绿色,否则设置成红色
Css部分:
.green{
background-color: green;
}
.red{
background-color: red;
}
html部分
<div id="app">
<table border="1" style="text-align: center;border-spacing: 0px;width: 500px;margin: 100px auto;">
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<!-- 函数adult_filterd 的形参就是竖线前面的 item.age -->
<tr v-for="item in msg" :key="item.id" :class="item.age | adult_filter">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
javascript部分
let app = new Vue({
el:\'#app\',
data:{
msg:[
{
id:1,
name:\'Alec\',
age:30
},
{
id:2,
name:\'Jack\',
age:19
},
{
id:3,
name:\'Alex\',
age:17
},
{
id:4,
name:\'John\',
age:16
}
],
},
//
// 过滤器
//
filters:{
adult_filter(data){
// 形参data就是竖线前面的数据
//如果年龄大于18的就返回 ‘green’ ,否则返回‘red’
return data>=18?\'green\':\'red\';
}
}
})
效果展示
以上是关于Vue过滤器(filters)的简单使用的主要内容,如果未能解决你的问题,请参考以下文章