vue filter的四種用法小結(jié)
filter的用法小結(jié)
使用計算屬性app.js
var app5 = new Vue({ ? ? el: '#app5', ? ? data: { ? ? ? ? shoppingList: [ ? ? ? ? ? ? "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)" ? ? ? ? ], ? ? ? ? key: "" ? ? }, ? ? computed: { ? ? ? ? filterShoppingList: function () { ? ? ? ? ? ? // `this` points to the vm instance ? ? ? ? ? ? var key = this.key; ? ? ? ? ? ? var shoppingList = this.shoppingList; ? ? ? ? ? ? return shoppingList.filter(function (item) { ? ? ? ? ? ? ? ? return item.toLowerCase().indexOf(key.toLowerCase()) != -1 ? ? ? ? ? ? });; ? ? ? ? } ? ? } })
app.html
<div id="app5"> ? ? ? ? <h2>Vue-for</h2> ? ? ? ? <ul> ? ? ? ? ? ? <li v-for="item in shoppingList"> ? ? ? ? ? ? ? ? {{ item }} ? ? ? ? ? ? </li> ? ? ? ? </ul> ? ? ? ? <h2>Vue-for filter實(shí)現(xiàn)</h2> ? ? ? ? <ul> ? ? ? ? ? ? Filter Key<input type="text" v-model="key"> ?? ? ? ? ? ? ? <li v-for="item in filterShoppingList"> ? ? ? ? ? ? ? ? {{ item }} ? ? ? ? ? ? </li> ? ? ? ? </ul> ? ? ? ? ? ? </div> ? ?
最終效果實(shí)現(xiàn)了根據(jù)關(guān)鍵字來過濾列表的功能。
filter的基本用法
filter是和data computed methods watch一樣,都是new Vue()的參數(shù)。
用于對簡單數(shù)據(jù)的處理,和computed有沖突,所以從vue2.0后就對filter做了刪減,我覺得沒有filter完全能夠用其他方法比如computed來實(shí)現(xiàn)
用在{{ 變量1 | 變量2 }} 或者 v-bind:xx=“ 變量1 | 變量2([參數(shù)) ” 兩種;其中變量1是data的k,變量2是filter的k,
filter:{ 變量2:function(變量1,參數(shù)){xxxx}}
<div id="app"> ? ? ? ? <div> {{val | upcaseVal(true)}}</div> ? ? ? ? <div v-bind:title="val | upcaseVal">{{val}}</div> ? ? ? ? <div>{{val | removeSpace}}</div> ? ? </div>
? ? <script> ? ? ? ? var vm = new Vue({ ? ? ? ? ? ? el: '#app', ? ? ? ? ? ? data: { ? ? ? ? ? ? ? ? val: 'hello world' ? ? ? ? ? ? }, ? ? ? ? ? ? filters: { ? ? ? ? ? ? ? ? upcaseVal: function (val, firstUpper) {//filter里函數(shù)的參數(shù)需要特別注意 第一個是指|前的值,第二個是true ? ? ? ? ? ? ? ? ? ? if (firstUpper) { ? ? ? ? ? ? ? ? ? ? ? ? return val.split(' ').map(function (e) { ? ? ? ? ? ? ? ? ? ? ? ? ? ? return e[0].toUpperCase() + e.slice(1) ? ? ? ? ? ? ? ? ? ? ? ? }).join(' ') ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? return val.toUpperCase(); ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? removeSpace:function(val){ ? ? ? ? ? ? ? ? ? ? return val.toUpperCase() ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? })
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用v-if v-show頁面閃爍,div閃現(xiàn)的解決方法
在頁面層次結(jié)構(gòu),數(shù)據(jù)較多的時候,用v-if或者v-show就會出現(xiàn)div閃現(xiàn),或者部分閃爍的結(jié)果。怎么處理這樣的問題呢,下面小編給大家?guī)砹藇ue使用v-if v-show頁面閃爍,div閃現(xiàn)的解決方法,一起看看吧2018-10-10

Vue reactive函數(shù)實(shí)現(xiàn)流程詳解

nginx部署訪問vue-cli搭建的項(xiàng)目的方法