Javascript 使用VueJS进行过滤

我是VueJS的新手，所以我的问题很简单。我无法使用vue筛选器。请帮我解决这个问题。 我的html文件如下所示。当我尝试此代码时，v-for中的项无法显示，并且it has错误无法解析筛选器：大写。 有人能告诉我为什么吗

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

{{item.id}
{{消息|大写}}
var pan=新的Vue({
el:'潘'，
数据：{
名单：[
{名称：'東京', id:“东京”，级别：“2”}，
{名称：'全国',id:“日本”，级别：“1”}，
{名称：'関東',id:“关东”，等级：“0”}，
],
留言：“你好”
}
});

如果您使用的是vuejs2，则已使用vuejs2大写筛选器。为此，您必须使用，如下所示：

<span>{{message.toUpperCase()}}</span>

---

这是。

您可以使用计算属性

标记：

<div id="pan" class="pan">
     <div v-for="item in orderedList" >{{ item.id }}</div>
     <span class="pan__title">{{ message }}</span>
</div>

然后，您可以通过修改

sortKey

（使用

v-model=“sortKey”

将元素的顺序更改为任何类型的输入，如

或任何其他方式）

---

---

至于大写字母呢，我更喜欢用css控制视图，属性可以解决这个问题：

.pan_utitle{text transform:uppercase；}

。但是你也可以为这个定义一个计算属性，或者让它与

{{message.toUpperCase（）}}

orderBy函数怎么样？@tanapruengsatra是的也被删除了那么我可以为orderBy功能使用什么函数呢？谢谢你的推荐。它真的很有用

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

<div id="pan" class="pan">
     <div v-for="item in orderedList" >{{ item.id }}</div>
     <span class="pan__title">{{ message }}</span>
</div>

data(){
    sortKey : 'level'
},
computed : {
    orderedList(){ return this.list.sort(this.sorter) }
},
methods : {
    sorter(a,b){ return a[this.sortKey] > b[this.sortKey] }
}