用VueJS过滤 [英] Filter with 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大写的过滤器已删除。您将不得不使用 toUpperCase（） a>，如下所示：

 < span> {{message.toUpperCase（）}}< / span> 
  

参见

同样 demo 。 orderBy-Filterrel =nofollow noreferrer> orderBy 过滤器也被删除，vuejs2建议使用lodash的 orderBy （或者 sortBy ）属性：

HTML

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

vue

 计算：{
 orderedList：function（）{
 return _.orderBy（this.list，'level'）
} 
 } 
  

这是 demo with orderBy 。

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过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！