Vue：入門6（列表渲染 ）

列表渲染

for循環（數組）。可以用 of 替代 in 作爲分隔符

<ul id="id1">
   <li v-for="item in items">
      {{item.data}}
   </li>
</ul>
<script>
   var vm1 = new Vue({
      el:'#id1',
      data:{
         items:[
            {data:'data1'},
            {data:'data2'}
         ],
      }
   });
   // vue還支持這些方法操作數組(變異方法)
   // push()
   // pop()
   // shift()
   // unshift()
   // splice()
   // sort()
   // reverse()
   //這個要註釋了不然會和下面的例子衝突
   //vm1.items.push({ message: 'Baz' });

   //替換數組，不會改變原始數組，而是返回一個行數組
   // filter()、concat() 和 slice()
   vm1.items = vm1.items.filter(function (item) {
      return item.data.match(/data1/);
   });
</script>

for的索引：(值，索引) in 數組。

<ul id="id2">
   <li v-for="(item,index) in items">
      {{ parentMessage }} - {{ index }} - {{ item.message }}
   </li>
</ul>
<script>
   var vm2 = new Vue({
      el:'#id2',
      data: {
         parentMessage:'parentMessage xxxx',
         items: [
            {'message':'2111'},
            {'message':'1111'}
         ]
      }
   });

</script>

v-for對象

<!-- 其中obj就是對象的名稱
結果：<ul id="id3" class="demo">
   <li>title</li>
   <li>data</li>
</ul>-->
<ul id="id3" >
   <li v-for="item in obj">
      {{item}}
   </li>
</ul>
<script>
   var vm3 = new Vue({
      el: '#id3',
      data:{
         obj:{
            title: 'title',
            data: 'data'
         }
      }
   });
</script>
<hr>

v-for 鍵名和索引

<div id="id4">
   <div  v-for="(val,key,index) in obj">
      {{val}}:{{key}}:{{index}}
   </div>
</div>
<script>
   var vm4 = new Vue({
      el: '#id4',
      data:{
         obj:{
            title: 'title',
            data: 'data'
         }
      }
   });
</script>

設置數組值的函數

<div id="id5">
   <ul v-for="item in items">
      <li>item: {{item}}</li>
   </ul>
   <ul v-for="item in itemArr">
      <li>item.message: {{item.message}}</li>
   </ul>
</div>
<script>
   var vm5 = new Vue({
      el:'#id5',
      data:{
         items:['a','b','c'],
         itemArr: [
            {'message':'2111'},
            {'message':'1111'}
         ]
      }
   });
   // 設置某個數組的值,從0開始算
   Vue.set(vm5.items, 1 ,' new b ');
   vm5.items.splice(2, 1 ,' new c');

   // 設置多維數組
   Vue.set(vm5.itemArr,1,{'message':'new message'});

   // 保留數組的長度爲2
   vm5.items.splice(2);
</script>

添加/修改對象新屬性

<div id="id6">
   <ul v-for="item in obj">
      <li>item: {{item}}</li>
   </ul>
</div>
<script>
   var vm6 = new Vue({
      el:'#id6',
      data:{
         obj:{
            name:'zyk',
         }
      }
   });
   Vue.set(vm6.obj,'age','18');
   Vue.set(vm6.obj,'name','zzzz');
   // 添加多個屬性，注意不是覆蓋
   vm6.obj = Object.assign({}, vm6.obj, {
      aaa:'test',
      bbb:'test2'
   });
</script>

計算屬性和方法的使用

<ul id="id7">
   <li v-for="n in num">{{n}}</li>
   <li v-for="n in even(orgNum)">{{n}}</li>
</ul>
<script>
   var vm7 = new Vue({
      el:'#id7',
      data:{
         orgNum:[1,2,3,4,5]
      },
      computed:{
         num:function () {
            // 只返回取餘爲0的，返回結果是2，4
            return this.orgNum.filter(function (number) {
               return number%2 === 0;
            })
         }
      },
      methods:{
         even:function (orgNum) {
            return orgNum;
         }
      }
   });
</script>

從1-10重複生成span

<div id="id8">
   <span v-for="n in 10">{{ n }} </span>
</div>
<script>
   var vm8 = new Vue({
      el:'#id8',
   });
</script>

v-for也可以使用template開包含多個標籤。這個就不舉完整的例子了

不推薦在同一元素上使用 v-if 和 v-for
當它們處於同一節點，v-for 的優先級比 v-if 更高，這意味着 v-if 將分別重複運行於每個 v-for 循環中

<ul>
   <template v-for="item in items">
      <li>{{ item.msg }}</li>
      <li class="divider" role="presentation"></li>
   </template>
</ul>

歡迎關注，會同步更新，隨時隨地一起學習
微信公衆號：教練我想學PHP
天天快報、騰訊新聞和QQ瀏覽器：教練我想學PHP