Vue学习之品牌案例部分代码小结（二）
品牌案例的增删查和其他部分效果：
<!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>
