[Vue] 使用 v-for 生成清單

假設

items

是一個雙重清單, 下面的循環方式是錯誤的(小程式中的寫法)

<div class="table_tr" v-for="(items, index) in items" :key="index">
   <div class="table_td">{[item[1]]}</div>
   <div class="table_td">{[item[0]]}</div>
   <div class="table_td">{[item[3]]}</div>
   <div class="table_td">{[item[4]]}</div>
</div>
           

正确的寫法是

<div class="table_tr" v-for="(items, index) in items" :key="index">
   <div class="table_td" v-for="(item, index) in items" :key="index">
   	{[item]}
   </div>
</div>
           

需要注意的是這種寫法會按數值原有的順序來填充清單, 有兩種可以改變填入的順序, 一是事先調整好資料的順序, 二是使用

v-if

來排序, 比如

<table class="layui-table" lay-filter="test">
  <thead>
    <tr>
      <th v-for="item in title_ls" width="10%">{[item]}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(values, key) in data_ls" :key="key">
      <td v-for="(value, index) in values" :key="index">
        <div v-if="index==0">
          <b class="hidden_val">{[key]}</b>
          <a href={[value]}>
            {[value]}
          </a>
        </div>
        <div v-else>
          {[value]}
        </div>
      </td>
    </tr>
  </tbody>
</table>