用VueJS过滤

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

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

来源

2017-01-18 Tanapat RUENGSATRA

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

来源

2017-01-18 07:58:49 Saurabh

orderBy函数呢？ –

@TanapatRUENGSATRA是[orderBy]（https://vuejs.org/v2/guide/migration.html#Replacing-the-orderBy-Filter）也已被删除 – Saurabh

那么我可以使用orderBy功能什么功能？ –

您可以使用计算属性。

标记：

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

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

Here is an example based on your code

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

来源

2017-01-18 08:45:49

谢谢您的推荐。这真的很有用 –

回答

相关问题