欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-15 13:39:38
...
<!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