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

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

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

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

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

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

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

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

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

<li v-for=\"(val,name,index) in account\">{{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({
  :\'沃尔玛将超过苹果成美国第三大在线零售商\'
});

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

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

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

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

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

<div id=\"app\">
 <h3>过滤出带“美元”的标题</h3>
 <ul>
 <li v-for=\"(n,index) in filterNews\">{{index}} - {{n. }}</li>
 </ul>
 <h3>按照标题长度，由短到长排序</h3>
 <ul>
 <li v-for=\"(n,index) in sortNews\">{{index}} - {{n. }}</li>
 </ul>
</div>

< >
 var app = new Vue({
 el: \'#app\',
 data: {
  news: [
  { : \'被智能手机绑架的i世代 爱熬夜、拒绝恋爱、不考驾照\'},
  { : \'黑莓宣布14亿美元收购网络安全公司Cylance\'},
  { : \'如何看待XXX开酒店赚美元这件事？\'}
  ]
 },
 computed: {
  //过滤出带“美元”的标题
  filterNews: function () {
  return this.news.filter(function (item) {
   return item. .match(/美元/);
  })
  },
  //按照标题长度，由短到长排序
  sortNews: function () {
  return this.news.sort(function (val1, val2) {
   if(val1. .length < val2. .length){
   return -1;
   }
  })
  }
 }
 });
</ >