商品的添加

代码展示

//HTML代码
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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">  
            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'">
                
            label>
        div>
    div>

    
    <table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
            <th>Idth>
            <th>Nameth>
            <th>Ctimeth>
            <th>Operationth>
        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)">deletea>
            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; } } });

 

你可能感兴趣的:(商品的添加)