Vue過濾器(filters)的簡單使用
阿新 • • 發佈:2021-11-20
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'; } } })