Vue - v-for 的延伸用法

Posted 2021-01-28 wwwblender-3dcn

1.v-for 合并标签template 一起使用

2.vue.set

1.v-for 合并标签template 一起使用

之前在设计table的时候，如果使用v-for ，会直接放在tr里面，一次产生一行tr，

但是如果一次要产生两行以上的tr，就可以考虑使用<template>

template 这个标签不会直接输出，使用方法如下

<h4>Template 的運用</h4>
<p>請將兩個 tr 一組使用 v-for</p>
<table class="table">
  <template v-for="item in arrayData">
    <tr>
      <td>{{item.age}}</td>
    </tr>
    <tr>
      <td>{{item.name}}</td>
    </tr>
  </template>
</table>

<script>
var vm = new Vue({
el: ‘#app‘,
data: {
    arrayData: [{
        name: ‘小明‘,
        age: 16
    }, {
        name: ‘漂亮阿姨‘,
        age: 24
    }, {
        name: ‘杰倫‘,
        age: 20
    }],
    
}
});

</script>

2.vue.set

<h4>vue.set介紹</h4>
<button class="btn btn-outline-primary" v-on:click="modifyArrayItem">修改陣列Index:0的內容</button>
<ul>
    <li v-for="(item, key) in arrayData" :key="item.age">
        {{ key }} - {{ item.name }} {{ item.age }} 歲 <input type="text">
    </li>
</ul>
<script>
var vm = new Vue({
el: ‘#app‘,
data: {
    arrayData: [{
        name: ‘小明‘,
        age: 16
    }, {
        name: ‘漂亮阿姨‘,
        age: 24
    }, {
        name: ‘杰倫‘,
        age: 20
    }],    
},
methods: {
modifyArrayItem: function() {

// 方法1
// vm.arrayData[0] = {
//     name: ‘阿強‘,
//     age: 99
// }    
/* 
 這樣不是真正改掉畫面上陣列Index=0的資料
 因為這個寫法是把vm.arrayData[0] 指到另外一個新的物件，
 而新的物件並沒有在Vue的監控之下，所以即使陣列內的值已經改變了，
 畫面上顯示的資料並不會被喧染上去
*/

// 方法2 透過屬性去改陣列Index=0 這個物件的屬性，可以修改成功
// vm.arrayData[0].name = ‘阿強‘;
// vm.arrayData[0].age = 100;

/*
使用 Vue.set(object, key, value)
一樣是把vm.arrayData[0] 指到另外一個新的物件，
並且把這個新的物件加入Vue的監控，因此修改後，
畫面上的資料也會跟著被喧染
*/
Vue.set(vm.arrayData, 0, {
    name: ‘阿強‘,
    age: 99
});
}        
}
});