快捷導(dǎo)航

vue filter的四種用法小結(jié)

更新時(shí)間：2022年04月11日 15:04:54 作者：大灰狼的小綿羊哥哥

這篇文章主要介紹了vue filter的四種用法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

filter的用法小結(jié)

使用計(jì)算屬性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ù)。

用于對(duì)簡單數(shù)據(jù)的處理，和computed有沖突，所以從vue2.0后就對(duì)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ù)需要特別注意 第一個(gè)是指|前的值，第二個(gè)是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()
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: