我是励志哥

vue案例之品牌列表案例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./lib/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-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.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>
            </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>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime | dateFormat(' ')}}</td>
            <td>
                <a href="" @click.prevent="del(item.id)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    //  定义的全局过滤器
    Vue.filter('dateFormat', function (dateStr, pattern = " ") {
        //  根据给定的时间字符串,得到特定的时间
        let dt = new Date(dateStr);
        let y = dt.getFullYear();
        let m = (dt.getMonth() + 1).toString().padStart(2, '0');
        let d = dt.getDate().toString().padStart(2, '0');
        // return `${y} - ${m} - ${d}`
        if (pattern && 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() 定义全局的指令
    //  其中参数1:指令的名称，在定义的时候指令的前面不需要加 v- 前缀
    //  在调用的时候,必须在指令前面加 v- 前缀来进行调用
    //  参数2 是一个对象，这个对象身上有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
    Vue.directive('focus',{
        bind:function(el){
            //  每当指令绑定到元素上的时候，会立即执行bind函数，只执行一次
            //  在每个函数中，第一个参数永远是el，表示被绑定了指令的那个元素，这个el参数，是一个原生的js对象
            //  在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候调用focus方法没有作用
            //  因为一个元素，只有插入DOM之后，才能获取焦点
            // el.focus()
        },
        inserted:function(el){
            //  inserted 表示元素 插入到DOM中的时候，会执行inserted函数【触发一次】
            el.focus()
        },
        updated:function(){
            //  当vNode更新的时候,会执行updated,可能会触发多次
        }
    });
    let vm = new Vue({
        el: "#app",   //  挂载点
        data: {
            id: '',
            name: '',
            list: [
                {id: 1, name: "兰博基尼", ctime: new Date()},
                {id: 2, name: "法拉利", ctime: new Date()},
                {id: 3, name: "玛莎拉蒂", ctime: new Date()},
                {id: 4, name: "劳斯莱斯幻影", ctime: new Date()}
            ],
            keywords: '',  //  搜索的关键字
        },
        methods: {
            add() {
                let car = {id: this.id, name: this.name, ctime: new Date()};
                if (this.id && this.name != "")
                    this.list.push(car);
                this.id = "";
                this.name = "";
            },
            del(id) {
                // this.list.some((item,i) =>{
                //     if(item.id == id){
                //         console.log(id);
                //         this.list.splice(i,1);
                //         //  在数组的some方法中，如果return true，就会终止这个数组的后续的循环
                //         return true
                //     }
                // })
                let index = this.list.findIndex(item => {
                    if (item.id == id) {

                        return true
                    }
                });
                this.list.splice(index, 1);
            },
            search(keywords) {
                console.log(keywords);
                var newList = [];
                this.list.forEach(item => {
                    if (item.name.indexOf(keywords) !== -1) {
                        newList.push(item)
                    }
                });
                return newList
            }
        },
        filters: {
            //  定义私有的过滤器
        }
    })
</script>
</html>

　　

posted @ 2020-06-17 14:56  python黑客编程  阅读(417)  评论(0)    收藏  举报