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

<div id="app">
 <ul>
 <li v-for="n in news">{{n.title}}</li>
 </ul>
</div>

<script>
 var app = new Vue({
 el: '#app',
 data: {
  news: [
  {title: '被智能手机绑架的i世代 爱熬夜、拒绝恋爱、不考驾照'},
  {title: '黑莓宣布14亿美元收购网络安全公司Cylance'},
  {title: '如何看待阿里巴巴开酒店这件事？'}
  ]
 }
 });
</script>

<li v-for="n of news">{{n.title}}</li>

<li v-for="(n,index) of news">{{index}} - {{n.title}}</li>

<div id="app2">
 <dl>
 <template v-for="n in news">
  <dt>{{n.title}}</dt>
  <dd>{{n.content}}</dd>
 </template>
 </dl>
</div>

var app2 = new Vue({
 el: '#app2',
 data: {
 news: [
  {title: '科技',content:'智能手机是我们生活的好帮手... ...'},
  {title: '互联网',content:'黑莓公司周五宣布... ...'},
  {title: '社会',content:'阿里实体酒店“FlyZoo Hotel”将开业... ...'}
 ]
 }
});

<div id="app3">
 <li v-for="val in aount">{{val}}</li>
</div>

var app3 = new Vue({
 el: '#app3',
 data: {
 aount: {
  name: 'deniro',
  messageCount: 100
 }
 }
});

<li v-for="(val,name,index) in aount">{{index}} - {{name}} : {{val}}</li>

<div id="app4">
 <ul>
 <li v-for="i in 5">{{i}}</li>
 </ul>
</div>

var app4 = new Vue({
 el: '#app4'
});

app.news.push({
 title:'沃尔玛将超过苹果成美国第三大在线零售商'
});

//非变异方法更新数组
 app.news = app.news.filter(function (item) {
 return item.title.match(/阿里巴巴/);
 });

app.new[1]={...}
app.new.length=1

//通过 set 的设置索引方式来更新数组
Vue.set(app.news,1,{
 title: '大数据之下的锦鲤为什么你的微博总抽不到奖'
});

//通过 splice 的设置索引方式来更新数组
app.news.splice(1, 0, {
 title: '南京现“刷脸支付”超市 网友素颜去结账机器能识'
});

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

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

<script>
 var app = new Vue({
 el: '#app',
 data: {
  news: [
  {title: '被智能手机绑架的i世代 爱熬夜、拒绝恋爱、不考驾照'},
  {title: '黑莓宣布14亿美元收购网络安全公司Cylance'},
  {title: '如何看待XXX开酒店赚美元这件事？'}
  ]
 },
 puted: {
  //过滤出带“美元”的标题
  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>