我的 Vue.js 學習日記 （六） – v-for 與 table 的 增、刪、排序、明細

Robi發表於2018-05-07
Vue.js排序

上節回顧

上一節把v-if與v-show看完了，心裡默默回想一下他們的用法與注意事項

v-for

最近加班回來的比較晚，沒什麼時間，今天就基於v-for寫一箇中規中矩例子吧

下面是一個帶有增、刪、列印明細、排序的基於 v-for 與 table 的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <!-- 開發環境版本，包含了用幫助的命令列警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>chapter - 6</title>
</head>
<body>
<div id="app">
  <table>
    <tr>
      <th>index</th>
      <th>key</th>
      <th>value <button @click="doSort">點我排序</button></th>
      <th>操作</th>
    </tr>
    <tr>
      <td></td>
      <td><input type="text" v-model="id" placeholder="input -> id"></td>
      <td><input type="text" v-model="name" placeholder="input -> name"></td>
      <td><button @click="addObj(id, name)">add</button></td>
    </tr>
    <tr v-for="(item, index) in items" :key="item.id">
      <td>{{index}}</td>
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>
        <button @click="printObj(item)">列印物件</button>
        <button @click="removeObj(index)">移除物件</button>
      </td>
    </tr>
  </table>
</div>

<script>
  const data = {
    id: ``,
    name: ``,
    items: [
      {id: 1, name: `name - 1`},
      {id: 2, name: `name - 3`},
      {id: 3, name: `name - 2`}
    ]
  }

  const methods= {
    printObj (obj) {
      console.log(obj.id + ` - `+obj.name )
    },
    removeObj (item) {
      this.items.splice(item,1)
    },
    addObj (id, name) {
      this.items.push({id: id, name: name})
    },
    doSort () {
      this.items.reverse(this.items.key)
    }
  }

 var vm = new Vue({
   el: `#app`,
   data: data,
   methods: methods
 })
</script>
</body>
</html>

小節

table是很常見的元素，那麼基於table的操作也變得很常見，希望以後忘記了如何編寫這些基礎操作的時候來這裡能快速的記憶起來。

相關文章