商品的添加
代码展示
//HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue-dev/dist/vue.js"></script> <link rel="stylesheet" href="bootstrap-master/dist/css/bootstrap.css"/> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"/> </head> <body> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-t">添加品牌</h3> </div> <!--添加商品--> <div class="panel-body form-inline"> <label> Name: <input type="text" class="form-control" v-model="Name" @keyup.enter="add"> <!--键盘监听时间只监听enter键--> </label> <input type="button" value="添加" class="btn btn-primary" @click="add"> <label> 搜索关键字: <input type="text" class="form-control" v-model="keywords" v-focus v-color="'red'"> <!-- 自定义指令，如果给它传值，值必须是字符串，则在自定义指令中用binding.value接收 --> </label> </div> </div> <!--商品列表--> <table class="table table-bordered table-hover table-striped"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Ctime</th> <th>Operation</th> </tr> </thead> <tbody> <!-- 不直接循环数组，而是通过自定义方法传入新数组 --> <!-- 这样列表中显示的内容受搜索关键字的影响，只会显示含有关键字的项 --> <tr v-for="item in search(keywords)" :key="item.Id"> <td v-cloak>{{item.Id}}</td> <td v-cloak>{{item.Name}}</td> <td v-cloak>{{item.Ctime | dateFormat}}</td> <td> <a href="#" @click.prevent="del(item.Id)">delete</a> </td> </tr> </tbody> </table> </div> <script src="js.js"></script> </body> </html>
//js代码
//定义一个全局的过滤器，处理时间格式 //在ES6中的字符串方法，String.prototype.padStart(maxLength,fillString="") //或者String.prototype.padEnd(maxLength,fillString="") 来填充字符串，参数为最大长度，用什么填充 Vue.filter("dateFormat", function () { var dt = new Date(); var y = dt.getFullYear(); var m = (dt.getMonth() + 1).toString().padStart(2,"0"); var d = (dt.getDate()).toString().padStart(2,"0"); var hh = (dt.getHours()).toString().padStart(2,"0"); var mm = (dt.getMinutes()).toString().padStart(2,"0"); var ss = (dt.getSeconds()).toString().padStart(2,"0"); var res = y + "-" + m + "-" + d + " " + hh + ":" + mm + ":" + ss; return res; }); // 自定义全局键盘符 // Vue.config.keyCodes.f2 = 113; //使用Vue.directive定义全局指令 //注意，在定义时第一个参数是指令名称，但不要加 v- ，而当调用时要加 v-前缀 //参数二是一个对象，存放指令相关的钩子函数 Vue.directive("focus",{ bind:function (el) { //当指令绑定到元素上时，会立即执行bind函数，且只执行一次 //函数参数必然是el，表示被绑定的那个元素，el是一个原生的js对象 //当一个元素绑定指令时，但还没有插入到DOM中时，调用focus是没有作用的，元素只有被插入到DOM中才会被获得焦点 el.focus() }, inserted:function (el) { //当元素插入到DOM中时，会执行一次 el.focus() }, updated:function (el) { //VNode更新时，会触发，可执行多次 } }); Vue.directive("color",{ //样式通过指令绑定给元素，不管元素是否插入DOM中，该元素都会有样式 //binding,钩子函数的第二个参数，是一个对象，包含一些属性 bind:function (el,binding) { el.style.color = binding.value; }, inserted:function () { }, update:function () { } }); var vm = new Vue({ el: "#app", data: { Name: '', keywords: '', ls: [] }, methods: { add: function () { var shop = {Id: this.ls.length + 1, Name: this.Name, Ctime: new Date()}; this.ls.push(shop);
this.Name = "" }, del: function (Id) { //循环数组，判断要删除的Id与数组中的哪个元素Id相同，然后删除这个元素 this.ls.some((item, i) => { /*循环会得到两参数，item数组中每一项，i 索引值*/ if (item.Id == Id) { this.ls.splice(i, 1); return true; } }); //删除一项后，数组每个元素的Id值应该重新计算，循环删除后的数组，并对每一项的Id重新赋值 this.ls.findIndex((item, i) => { item.Id = i + 1; }) }, search(keywords) { var newLs = []; /*自定义一个新的数组，用来存放符合要求的项*/ this.ls.some((item) => { if (item.Name.indexOf(keywords) != -1) { /*判断关键字是否在原数组某一项的Name中*/ newLs.push(item) } }); return newLs; } } });
