深入淺析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億美元收購網(wǎng)絡(luò)安全公司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: '互聯(lián)網(wǎng)',content:'黑莓公司周五宣布... ...'},
  {title: '社會',content:'阿里實體酒店“FlyZoo Hotel”將開業(yè)... ...'}
 ]
 }
});

<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({
 title:'沃爾瑪將超過蘋果成美國第三大在線零售商'
});

//非變異方法更新數(shù)組
 app.news = app.news.filter(function (item) {
 return item.title.match(/阿里巴巴/);
 });

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

//通過 set 的設(shè)置索引方式來更新數(shù)組
Vue.set(app.news,1,{
 title: '大數(shù)據(jù)之下的錦鯉：為什么你的微博總抽不到獎'
});

//通過 splice 的設(shè)置索引方式來更新數(shù)組
app.news.splice(1, 0, {
 title: '南京現(xiàn)“刷臉支付”超市 網(wǎng)友：素顏去結(jié)賬機器能識'
});

//通過 splice 來刪除數(shù)組元素
app.news.splice(1);

<div id="app">
 <h4>過濾出帶“美元”的標題</h4>
 <ul>
 <li v-for="(n,index) in filterNews">{{index}} - {{n.title}}</li>
 </ul>
 <h4>按照標題長度，由短到長排序</h4>
 <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億美元收購網(wǎng)絡(luò)安全公司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>