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

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

 更新時間:2022年04月11日 15:04:54   作者:大灰狼的小綿羊哥哥  
這篇文章主要介紹了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 reactive函數(shù)實(shí)現(xiàn)流程詳解

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

    一個基本類型的數(shù)據(jù),想要變成響應(yīng)式數(shù)據(jù),那么需要通過ref函數(shù)包裹,而如果是一個對象的話,那么需要使用reactive函數(shù),這篇文章主要介紹了Vue reactive函數(shù)
    2023-01-01
  • nginx部署訪問vue-cli搭建的項(xiàng)目的方法

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

    本篇文章主要介紹了nginx部署訪問vue-cli搭建的項(xiàng)目的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-02
  • vue的指令和插值總結(jié)(非常詳細(xì))

    vue的指令和插值總結(jié)(非常詳細(xì))

    這篇文章主要給大家介紹了關(guān)于vue指令和插值的相關(guān)資料,大家應(yīng)該對指令和插值都不陌生,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-06-06
  • Vue axios的使用和全局baseURL配置方式

    Vue axios的使用和全局baseURL配置方式

    作為一個全棧開發(fā)人員,前端UI框架和網(wǎng)絡(luò)請求都得有基本的掌握,我以最簡潔易懂的方式講解axios的使用和全局baseURL的配置
    2024-05-05
  • 詳解Vue2.0組件的繼承與擴(kuò)展

    詳解Vue2.0組件的繼承與擴(kuò)展

    這篇文章主要介紹了詳解Vue2.0組件的繼承與擴(kuò)展,主要分享slot、mixins/extends和extend的用法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • 理順8個版本vue的區(qū)別(小結(jié))

    理順8個版本vue的區(qū)別(小結(jié))

    這篇文章主要介紹了理順8個版本vue的區(qū)別(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • vue3 element的Form表單用法實(shí)例

    vue3 element的Form表單用法實(shí)例

    這篇文章主要為大家介紹了vue3中element的Form表單用法實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-10-10
  • 最新評論