javascript - 使用 VueJS 过滤

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>

视觉

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

这里是 demo with orderBy .