本文介绍了用VueJS过滤的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我对VueJS很新,所以我的问题很简单。我不能使用vue过滤器。请帮我解决这个问题。我的html文件显示如下。当我尝试此代码v-for中的项目不能显示,也有错误无法解析过滤器:大写。
任何人都可以告诉我为什么?
< div id =panclass =pan>
< div v-for =item in list | orderBy'level'> {{item.id}}< / div>
< span> {{message |大写}}< /跨度>
< / div>
< script type =text / javascriptsrc =https://unpkg.com/vue/dist/vue.js>< / script>
< script type =text / javascript>
var pan = new Vue({
el:'#pan',
data:{
list:[
{name :'东京',id:TOKYO,等级:2},
{name:'全国',id:JAPAN,等级:1},
{name:关东',id:KANTO,等级:0},
,
消息:hello
}
});
< / script>
解决方案如果使用vuejs2,用vuejs2大写的过滤器已。您将不得不使用。 orderBy-Filterrel =nofollow noreferrer> orderBy 过滤器也被删除,vuejs2建议使用lodash的(或者)属性:
HTML
HTML
< ; p v-for =items in orderedList> {{item.name}}< / p>
vue
计算:{
orderedList:function(){
return _.orderBy(this.list,'level')
}
}
这是。
I am very new with VueJS so my question is very simple. I cannot use vue filter. Please help me fix the problem.My html file is shown as followed. When I try this code the item in v-for can't be shown and also the it has error Failed to resolve filter: uppercase.Can any one tell me why?
<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>
解决方案
If you are using vuejs2, with vuejs2 uppercase filter has been removed. You will have to use toUpperCase() for this, like following:
<span>{{message.toUpperCase()}}</span>
see demo.
Similarly orderBy filter also has been removed, vuejs2 suggests to use lodash’s orderBy (or possibly sortBy) in a computed property:
HTML
<p v-for="item in orderedList">{{ item.name }}</p>
vue
computed: {
orderedList: function () {
return _.orderBy(this.list, 'level')
}
}
Here is demo with orderBy.
这篇关于用VueJS过滤的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
08-12 13:49