<div> <h3>过滤出带“美元”的标题</h3> <ul> <li v-for="(n,index) in filterNews">{{index}} - {{n.title}}</li> </ul> <h3>按照标题长度，由短到长排序</h3> <ul> <li v-for="(n,index) in sortNews">{{index}} - {{n.title}}</li> </ul> </div>
js：
<script> var app = new Vue({ el: '#app', data: { news: [ {title: '被智能手机绑架的i世代 爱熬夜、拒绝恋爱、不考驾照'}, {title: '黑莓宣布14亿美元收购网络安全公司Cylance'}, {title: '如何看待XXX开酒店赚美元这件事？'} ] }, computed: { //过滤出带“美元”的标题 filterNews: function () { return this.news.filter(function (item) { return item.title.match(/美元/); }) }, //按照标题长度，由短到长排序 sortNews: function () { return this.news.sort(function (val1, val2) { if(val1.title.length < val2.title.length){ return -1; } }) } } }); </script>
效果（ demo ）：
总结
以上所述是小编给大家介绍的Vue.js 中的 v-for 列表渲染指令，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: