javascript-用VueJS过滤

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

解决方法:

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

标签：vue-js,filter,html,javascript
来源： https://codeday.me/bug/20191111/2022614.html