vue中基本的品牌案例增删改查

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <link href="../lib/bootstrap.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="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>
            <input type="button" class="btn btn-primary" value="添加" @click="add">
            <label>
                搜索名称关键字:
                <input type="text" class="form-control" v-model="keyword" v-focus v-color="'green'">
            </label>
        </div>
    </div>
    <table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
            <td>Id</td>
            <td>Name</td>
            <td>Ctime</td>
            <td>Operation</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in search(keyword)" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.time | timeFilter }}</td>
            <td>
                <a href="" @click.prevent="del(item.id)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>

    /*自定义全局指令（获取焦点）*/
    Vue.directive('focus',{
        inserted:function (el) {
            el.focus();
        }
    });
    
    /*自定义全局指令（设置颜色）*/
    Vue.directive('color',{
        bind:function (el,binding) {
            el.style.color = binding.value;
        }
    });

    /*自定义按键修饰符*/
    Vue.config.keyCodes.f2=113;

    /*全局过滤器，过滤时间形式*/
    Vue.filter('timeFilter',function (data) {
       var time = new Date(data);
        var y = time.getFullYear();
        var mm = (time.getMonth()+1).toString().padStart(2,'0');
        var d = time.getDate().toString().padStart(2,'0');
        var h = time.getHours().toString().padStart(2,'0');
        var m = time.getMinutes().toString().padStart(2,'0');
        var s = time.getSeconds().toString().padStart(2,'0');
        return `${y}-${mm}-${d} ${h}:${m}:${s}`
    });

    var vm = new Vue({
        el: '.app',
        data: {
            id: '',
            name: '',
            keyword:'',
            list: [{
                id: 1,
                name: '宝马',
                time: new Date()
            }]
        },
        methods: {
            /*添加*/
            add(){
                var current = {
                    id: this.id,
                    name: this.name,
                    time: new Date()
                };
                this.list.push(current);
                this.id = this.name = '';
            },
            /*删除*/
            del(id){
                /*根据id获取当前索引的数据，使用数组的splice方法删除*/
                var index = this.list.findIndex(function (item) {
                    if(item.id == id){
                        return true;
                    }
                });
                this.list.splice(index,1);
            },
            search(keyword){
                /*遍历数组，过滤*/
               return this.list.filter(function (item) {
                    //如果这个元素的name值包含了keyword搜索值，返回这个元素
                    if(item.name.includes(keyword)){
                        return item;
                    }
                })
            }
        }
    });
</script>
</body>
</html>
vue中基本的品牌案例增删改查

猜你喜欢
