saber゛

商品的添加

代碼展示

//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;
            }
        }
    });

posted @ 2019-09-08 21:29 saber゛ Views(218) Comments(0) 收藏舉報

刷新頁面返回頂部

saber゛

商品的添加

公告