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

時間 2019-12-06

標籤個人 vue.js vue 學習日記 table 排序明細欄目 JavaScript 简体版

原文原文鏈接

上節回顧

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

v-for

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

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

<!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>