Question

我对VueJS很新，所以我的问题非常简单。我不能使用vue过滤器。请帮我解决问题。我的html文件如下所示。当我尝试此代码时，无法显示v-for中的项目，并且它还有错误无法解析过滤器：大写。谁能告诉我为什么？

    <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>

Answer 1

如果您使用的是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。

Answer 2

您可以使用计算属性。

标记：

<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] }
}

然后，您可以通过修改orderedList（使用sortKey到任何类型的输入，例如v-model="sortKey"或任何其他方式）来更改<select></select>中元素的顺序。

Here is an example based on your code

那么大写，我更喜欢用css控制视图，而text-transform属性可以解决这个问题：.pan__title { text-transform: uppercase; }。但是你也可以为这个定义一个计算属性，或者使它与{{ message.toUpperCase() }}保持内联。

使用VueJS过滤

2 个答案: