用VueJS過濾

我對VueJS非常新，所以我的問題很簡單。我無法使用vue過濾器。請幫我解決這個問題。我的html文件顯示如下。當我嘗試這段代碼時，v-for中的項目無法顯示，並且它有錯誤。無法解析過濾器：大寫。任何人都可以告訴我爲什麼？用VueJS過濾

<div id="pan" class="pan"> 
    <div v-for="item in list|orderBy 'level'" >{{item.id}}</div> 
     <span>{{message | uppercase}}</span> 
    </div> 

<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script> 
<script type="text/javascript"> 

    var pan = new Vue({ 
    el: '#pan', 

    data: { 
    list: [ 
     { name: '東京', id:"TOKYO",level:"2"}, 
     { name: '全國',id:"JAPAN",level:"1" }, 
     { name: '関東',id:"KANTO",level:"0" }, 


    ], 
    message:"hello" 
    } 

}); 
</script>

來源

2017-01-18 Tanapat RUENGSATRA

如果使用vuejs2，與vuejs2大寫的過濾器已removed。你將不得不使用toUpperCase()這一點，像下面：

<span>{{message.toUpperCase()}}</span>

看到demo。

同樣orderBy濾波器也已被去除，vuejs2建議使用lodash的orderBy（或可能sortBy）在計算屬性：

HTML

<p v-for="item in orderedList">{{ item.name }}</p>

VUE

computed: { 
    orderedList: function() { 
    return _.orderBy(this.list, 'level') 
    } 
}

這是demo with orderBy。

來源

2017-01-18 07:58:49 Saurabh

orderBy函數呢？ –

@TanapatRUENGSATRA是[orderBy]（https://vuejs.org/v2/guide/migration.html#Replacing-the-orderBy-Filter）也已被刪除 – Saurabh

那麼我可以使用orderBy功能什麼功能？ –

您可以使用計算屬性。

標記：

<div id="pan" class="pan"> 
    <div v-for="item in orderedList" >{{ item.id }}</div> 
    <span class="pan__title">{{ message }}</span> 
</div>

內Vue公司的定義：

data(){ 
    sortKey : 'level' 
}, 
computed : { 
    orderedList(){ return this.list.sort(this.sorter) } 
}, 
methods : { 
    sorter(a,b){ return a[this.sortKey] > b[this.sortKey] } 
}

然後你就可以通過修改sortKey（使用v-model="sortKey"到任何類型的輸入改變orderedList元素的順序，像<select></select>或任何其他方式）。

Here is an example based on your code

又是怎麼回事大寫，我更喜歡用CSS控制的圖，其text-transform屬性可以解決這個問題：.pan__title { text-transform: uppercase; }。但是你也可以爲這個定義一個計算屬性，或者保持它與{{ message.toUpperCase() }}內聯。

來源

2017-01-18 08:45:49

謝謝您的推薦。這真的很有用 –

回答

相關問題