Vue獲取資料和簡單的增刪、輸入框聚焦自定義指令
阿新 • • 發佈：2018-12-19
- 需求：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()
}
})