欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue filter的四種用法小結

 更新時間:2022年04月11日 15:04:54   作者:大灰狼的小綿羊哥哥  
這篇文章主要介紹了vue filter的四種用法小結,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

filter的用法小結

使用計算屬性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實現(xiàn)</h2>
? ? ? ? <ul>
? ? ? ? ? ? Filter Key<input type="text" v-model="key"> ??
? ? ? ? ? ? <li v-for="item in filterShoppingList">
? ? ? ? ? ? ? ? {{ item }}
? ? ? ? ? ? </li>
? ? ? ? </ul> ? ? ? ?
? ? </div> ? ?

最終效果實現(xiàn)了根據(jù)關鍵字來過濾列表的功能。 

filter的基本用法

filter是和data  computed   methods watch一樣,都是new Vue()的參數(shù)。

用于對簡單數(shù)據(jù)的處理,和computed有沖突,所以從vue2.0后就對filter做了刪減,我覺得沒有filter完全能夠用其他方法比如computed來實現(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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

最新評論