品牌案例的增刪查和其他部分效果： ...
品牌案例的增刪查和其他部分效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="./lib/vue.js"></script> <link rel="stylesheet" href="./lib/bootstrap.min.css" /> <!-- 需要用到Jquery嗎？？？其實不需要的jq主要是用Js進行查詢、操作DOM元素的，而VUE是用於免除操作DOM的過程，所以不需要載入的 --> </head> <body> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">添加品牌</h3> </div> <div class="panel-body form-inline"> <label> Id: <input type="text" class="form-control" v-model="id" /> </label> <label> Name: <input type="text" class="form-control" v-model="name" @keyup.f2="add" /> </label> <!-- 在VUE使用事件綁定機制，為元素指定處理函數時，如 果加（）就可以傳參數了 --> <input type="button" value="添加" class="btn btn-primrary" @click="add" /> <label> 搜索名稱關鍵字： <input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'red'" /> </label> </div> </div> <table class="table table-bordered table-hover table-striped"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Ctime</th> <th>Opertion</th> </tr> </thead> <tbody> <tr v-for="item in search(keywords)" :key="item.id"> <td>{{ item.id }}</td> <td v-text="item.name"></td> <td>{{ item.ctime | dateFormat(' ')}}</td> <td> <a href="" @click.prevent="del(item.id)">刪除</a> </td> </tr> </tbody> </table> </div> <script> //全局的過濾器，進行時間的格式化 Vue.filter("dateFormat", function(dateStr, pattern = "") { //根據給定的時間字元串，得到特定的時間 var dt = new Date(dateStr); var y = dt.getFullYear(); //後面加的padStart是ES6新用法，自動補全的，長度為2，用0補充！目的是讓個位數改成0兩位數！ var m = (dt.getMonth() + 1).toString().padStart(2, "0"); var d = dt .getDate() .toString() .padStart(2, "0"); if (pattern.toLowerCase() === "yyyy-mm-dd") { return `${y}-${m}-${d}`; } else { var hh = dt .getHours() .toString() .padStart(2, "0"); var mm = dt .getMinutes() .toString() .padStart(2, "0"); var ss = dt .getSeconds() .toString() .padStart(2, "0"); return `${y}-${m}-${d} ${hh}:${mm}:${ss}`; } }); //自定義全局按鍵修飾符：新系統自動生成的按鍵也就幾種，這個數字是其按鍵對應的鍵值！為避免難以記憶先聲明定義下！ Vue.config.keyCodes.f2 = 113; //獲取焦點的--使頁面刷新就在搜索框內能點取 Vue.directive("focus", { bind: function(el) {}, inserted: function(el) { el.focus(); }, update: function(el) {} }); //獲取焦點的字體顏色變成指定的顏色！ Vue.directive("color", { bind: function(el, binding) { el.style.color = binding.value; } }); //創建Vue實例 var vm = new Vue({ el: "#app", data: { id: "", name: "", keywords: "", list: [ { id: 1, name: "賓士", ctime: new Date() }, { id: 2, name: "寶馬", ctime: new Date() } ] }, methods: { add() { // 從data上獲取id name，組織個對象，用數組的方法進行添加 var car = { id: this.id, name: this.name, ctime: new Date() }; this.list.push(car); this.id = this.name = ""; }, del(id) { //根據id刪除數據--找到索引，調用數組的splice方法 this.list.some((item, i) => { if (item.id == id) { this.list.splice(i, 1); //在數組的some方法中，如果return true，就會立即終止這個數組的後續迴圈 return true; } }); //第二種方法--專門查找索引 // var index=this.list.findIndex(item =>{ // if(item.id==id) { // return true; // } // }) // this.list.splice(index,1) }, search(keywords) { //根據關鍵字，進行數據的搜索 // var newList=[] // this. list.forEach(item=>{ // if(item.name.indexof(keywords) !=-1){ // newList.push(item) // } // }) // return newList // forEach some filter findIndex這些都是數組的新方法，都會對數組中的每一項，進行遍歷，執行相關的操作 return this.list.filter(item => { //在ES6中，為字元串提供一種新方法，叫String.prototype.includes('要包含的字元串') 相當於contain if (item.name.includes(keywords)) { return item; } }); } } }); </script> </body> </html>
