1. 程式人生 > >Vue獲取資料和簡單的增刪、輸入框聚焦自定義指令

Vue獲取資料和簡單的增刪、輸入框聚焦自定義指令

- 需求:1.點選刪除按鈕刪除資料 2.點選新增按鈕新增資料

我在這裡插入圖片描述

完整程式碼

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="./vue.js"></script>
  <style>

    #app{
            width:600px;
                margin:10px auto;
        }
          .tb{
              border-collapse:collapse;
              width: 100%;
          }
          .tb th{
              background-color: #0094ff;
              color:white;
          }
  
          .tb td,.tb th{
              padding:5px;
              border:1px solid black;
              text-align: center;
          }
  
          .add{
              padding: 5px;
              border:1px solid black;
              margin-bottom: 10px;
          }
      </style>
</head>

<body>
  <div id="app">
    <div class="add">
      <!-- 3.2 使用雙向資料繫結獲取input框的值 -->
      編號:<input type="text" v-model="newId">
      品牌名稱:<input type="text" v-model="newName" v-myfocus>
      <!-- 3.1 繫結事件 -->
      <input type="button" value="新增" @click="addData">
    </div>

    <div class="add">
      品牌名稱:<input type="text" placeholder="請輸入搜尋條件">
    </div>

    <div>
      <table class="tb">
        <tr>
          <th>編號</th>
          <th>品牌名稱</th>
          <th>創立時間</th>
          <th>操作</th>
        </tr>
        <!-- 1.2 在tr中使用v-for -->
        <tr v-for="(item, index) in list" :key="index">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.ctime}}</td>
          <td>
            <!-- 2.1 繫結事件,傳遞刪除項的索引 -->
            <button @click="deleteData(index)">刪除</button>
          </td>
        </tr>
        <!-- 1.3當陣列list長度為0時,顯示 -->
        <tr v-if="list.length === 0">
          <td colspan="4">沒有品牌資料</td>
        </tr>
        <!-- 動態生成內容tr -->
      </table>
    </div>
  </div>
</body>
<script>
  // 5.1 使用Vue.directive()方法建立全域性自定義指令。現在需求,建立一個v-myfocus指令
  // 該函式有兩個引數
  // 1. 自定義指令的名字,不能帶v-, 使用全小寫
  // 2. 一個物件,物件內部有一些配置項
  Vue.directive('myfocus', {
    // 5.2 這個物件配置項中,有很多方法,重點關注inserted方法,它表示當指令插入到標籤中時,自動執行
    inserted(el) {
      el.focus()
    }
  })
  let vm = new Vue({
    el: '#app',
    data: {
      newId: '',
      newName: '',
      // 1.1 建立假資料
      list: [{
          id: 1,
          name: 'CC',
          ctime: new Date()
        },
        {
          id: 2,
          name: 'Nike',
          ctime: new Date()
        },
        {
          id: 3,
          name: '阿迪',
          ctime: new Date()
        },
      ]
    },
    methods: {
      // 2.2 定義刪除資料函式
      deleteData(idx) {
        this.list.splice(idx, 1)
      },
      // 3.3 使用push方法追加資料
      addData() {
        this.list.push({
          id: this.newId,
          name: this.newName,
          ctime: new Date()
        })
        // 3.4 新增完成清空input框
        this.newId = ''
        this.newName = ''
      }
    }
  })
</script>

</html>

獲取資料

  • 在 data 中新增
    一個名稱為list的變數,型別為陣列,存放品牌資料的物件,格式為:{id:1,name:‘寶馬’,ctime:Date()

}

var vm = new Vue({
  el: '#app',
  data: {
    list: [
      {id: 1, title: 'LV', ctime: new Date()},
      {id: 2, title: 'CC', ctime: new Date()},
      {id: 3, title: 'CK', ctime: new Date()},
    ]
  }
})
  • 在table中的“動態生成內容tr”位置使用v-for指令遍歷list陣列資料生成表格內容行,注意要寫:key
<tr v-for="(item, index) in list" :key="index">
        <td>{{item.id}}</td>
        <td>{{item.title}}</td>
        <td>{{item.ctime}}</td>
        <td>
          <a href="javascript:void(0)">刪除</a>
        </td>
 </tr>
  • 處理 “沒有品牌資料” --> 利用:v-if進行判斷,當list為空時,才顯示沒有品牌資料
 <tr v-if="list.length==0">
    <td colspan="4">沒有品牌資料</td>
</tr>

刪除

  • 監聽刪除按鈕click事件,執行deleteData(),在這個函式中傳遞資料項的索引
    <button @click="deleteData(index)">刪除</button>
  • 在函式定義時,根據索引,呼叫splice方法刪除
methods:{
	// 定義刪除資料函式
      deleteData(idx) {
        this.list.splice(idx, 1)
      }
}

新增

  • 1.給新增按鈕click繫結addData
      <input type="button" value="新增" @click="addData">
  • 2.用兩個v-model和input框進行雙向資料繫結,v-model命名不能是一樣的
 編號:<input type="text" v-model="newId" id="myIdInput" ref="idRef">
 品牌名稱:<input type="text" v-model="newName" ref="nameRef">
  • 直接addData()函式中使用push方法向list陣列中追加資料
    methods: { // 使用push方法追加資料 addData() { this.list.push({id: this.newId, name: this.newName, ctime: new Date()}) // 新增完成清空input框 this.newId = '' this.newName = '' } }

輸入框聚焦自定義指令

  • HTML程式碼
//
編號:<input type="text" v-model="newId" v-myfocus>
品牌名稱:<input type="text" v-model="newName" v-myfocus>
  • js程式碼
// 使用Vue.directive()方法建立全域性自定義指令。現在需求,建立一個v-myfocus指令
  // 該函式有兩個引數
  // 1. 自定義指令的名字,不能帶v-, 使用全小寫
  // 2. 一個物件,物件內部有一些配置項
  Vue.directive('myfocus', {
    // 這個物件配置項中,有很多方法,重點關注inserted方法,它表示當指令插入到標籤中時,自動執行
    inserted(el, binding) {
      console.log('指令插入到標籤中了');
      el.focus()
    }
  })