深入浅析Vue.js 中的 v-for 列表渲染指令

title: '南京现“刷脸支付”超市 网友：素颜去结账机器能识'
});

至于第二个问题，同样可以通过 splice 来实现：

//通过 splice 来删除数组元素
app.news.splice(1);

以上示例 demo 。

3 过滤或排序

其实，之前已经有一个示例用到了 filter() 过滤方法。如果我们不想改变原数组，只想返回过滤或排序后数组副本，这时可以使用计算属性来实现。

html：

<div id="app">
 <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 列表渲染指令，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！