vue小案例之品牌列表(后台数据显示)

￡神魔★判官ぃ 2023-07-11 06:08 3阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./lib/vue-2.4.0.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
        <style>
            body,
            html { 
                padding: 0;
                margin: 0;
            }
    
            #app { 
                padding: 20px;
            }
        </style>
    </head>
    
    <body>
    
        <div id="app">
    
            <div class="panel panel-success">
                <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" @keyup.enter="add"></label>
                    <button type="button" class="btn btn-primary" @click="add">添加</button>
    
    
                    <div class="form-group has-feedback">
                        <label>搜索关键字</label>
                        <input type="email" class="form-control" v-model="keywords" v-focus v-color="'cyan'">
                        <span class="glyphicon glyphicon-search form-control-feedback"></span>
                    </div>
                </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">
                        <th>{ {  item.id }}</th>
                        <th>{ {  item.name }}</th>
                        <th>{ {  item.ctime |timeFormat() }}</th>
                        <th><a href="javascript:void(0)" @click.prevent="del(item.id)">删除</a></th>
    
                    </tr>
                </tbody>
            </table>
    
        </div>
    
        <div id="app2">
    
        <h3 v-color="'pink'" v-fontweight="900" v-fontsize="30">{ {  dt | dateFormat }}</h3>
            
        </div>
        <script>
            // 2全局过滤器
            Vue.filter('timeFormat', function (date, allDate = '') { 
                let dt = new Date(date);
                let Y = dt.getFullYear().toString().padStart(2, '0');
                let m = (dt.getMonth() + 1).toString().padStart(2, '0');
                let d = dt.getDate().toString().padStart(2, '0');
                if (allDate.toLowerCase() == 'yyyy-mm-dd') { 
                    return `${ Y}-${ m}-${ d}`;
                } else { 
                    let h = dt.getHours().toString().padStart(2, '0');
                    let i = dt.getMinutes().toString().padStart(2, '0');
                    let s = dt.getSeconds().toString().padStart(2, '0');
                    return `${ Y}-${ m}-${ d}　${ h}:${ i}:${ s}`;
                }
            })
    
            // 自定义全局按键修饰符
            Vue.config.keyCodes.f2 = 113;
    
            //使用directive定义全局自定义全局指令 
            Vue.directive('focus', { 
                inserted: function (el) { 
                    // 和js行为有个
                    el.focus()
                }
            })
            Vue.directive('color', { 
          // 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
          // 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
          bind: function (el, binding) { 
            // el.style.color = 'red'
            // console.log(binding.name)
            // 和样式相关的操作，一般都可以在 bind 执行
    
            // console.log(binding.value)
            // console.log(binding.expression)
    
            el.style.color = binding.value
          }
        })
    
            // 1,基础方法，添加，删除，搜索
            const vm = new Vue({ 
                el: '#app',
                data: { 
                    id: '',
                    name: '',
                    keywords: '',
                    list: [
                        { id: 1, name: '奔驰',ctime: new Date()},
                        { id: 2,  name: '宝马',  ctime: new Date() },
                        { id: 3, name: '兰博基尼', ctime: new Date() }
                    ]
                },
    
                methods: { 
                    add() { 
                        const car = {  id: this.id, name: this.name,ctime: new Date() };
                        this.list.push(car);
                        this.name = this.id = '';
                    },
                    del(id) { 
                        this.list.some((item, i) => { 
                            if (item.id == id) { 
                                this.list.splice(i, 1)
                                return true;
                            }
                        })
                    },
                    // 第一种方式
                    // search(keywords){ 
                    // let newList = [];
                    // this.list.forEach(item => { 
                    // if(item.name.indexOf(keywords) != -1){ 
                    // newList.push(item)
                    // }
                    // });
                    // return newList
                    // }
    
                    // 第二种方式
                    search(keywords) { 
                        return this.list.filter(item => { 
                            if (item.name.includes(keywords)) { 
                                return item
                            }
                        })
                    }
                }
            })
       
            // 2私有过滤器,私有指令 
            const vm2 = new Vue({ 
                el: '#app2',
                data: { 
                    dt: new Date()
                },
                filters: { 
                    dateFormat: function (date, allDate = '') { 
                        let dt = new Date(date);
                        let Y = dt.getFullYear().toString().padStart(2, '0');
                        let m = (dt.getMonth() + 1).toString().padStart(2, '0');
                        let d = dt.getDate().toString().padStart(2, '0');
                        if (allDate.toLowerCase() == 'yyyy-mm-dd') { 
                            return `${ Y}-${ m}-${ d}`;
                        } else { 
                            let h = dt.getHours().toString().padStart(2, '0');
                            let i = dt.getMinutes().toString().padStart(2, '0');
                            let s = dt.getSeconds().toString().padStart(2, '0');
                            return `${ Y}-${ m}-${ d}　${ h}:${ i}:${ s}~~~`;
                        }
                    }
                },
                directives: {  // 自定义私有指令
                    'fontweight': {  // 设置字体粗细的
                        bind: function (el, binding) { 
                            el.style.fontWeight = binding.value
                        }
                    },
                    'fontsize': function (el, binding) {  // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
                        el.style.fontSize = parseInt(binding.value) + 'px'
                    }
                }
            })
    
       </script>
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200304145941936.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70