Vue-----品牌案例讲解

最新推荐文章于 2025-05-14 22:27:35 发布

scwMason

最新推荐文章于 2025-05-14 22:27:35 发布

阅读量352

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/scwMason/article/details/84931395

版权

vue 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了使用Vue.js实现品牌管理系统的全过程，包括添加、删除、查询品牌等核心功能，并展示了如何利用Vue自定义指令和全局过滤器优化用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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 for="">
                    Id:
                    <input type="text" class="form-control" v-model="id">
                </label>
                <label for="">
                    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 for="">搜索关键字</label>
                <input type="text" name="" id="" class="form-control" v-model="keywords">
            </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 v-text="item.name"></td>
                    <td>{{item.ctime|dateFormat}}</td>
                    <td>
                        <!-- 要阻止默认事件，因为他是一个a标签，按一下就要刷新页面的，而我们不需要 -->
                        <a href="" @click.prevent="del(item.id,$event)">删除</a>
                        <!-- <input type="button" value="Delete" class="btn btn-primary" @click="delete(item.id)"> -->
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

data: {
                id: "",
                name: "",
                list: [
                    { id: 1, name: '奔驰', ctime: new Date() },
                    { id: 2, name: "宝马", ctime: new Date() }
                ],
                keywords:""
            },

1.添加功能：

 add() {
       var car = { id: this.id, name: this.name, ctime: new Date() }
       this.list.push(car);
       },

2.删除功能

del:function(id,event) {
  //第一种
   this.list.some((item, i) => {
   if (item.id == id) {
     this.list.splice(i, 1)
     return true;
   }
  })
  //第二种
  // var index=this.list.findIndex(item=>{
  //     if(item.id==id){
  //         return true;
  //     }
  // })
  // this.list.splice(index,1);
 },

3.查询功能

search(keywords){
    //第一种
              var newlist=[]
                   this.list.forEach(element => {
                       if(element.name.indexOf(keywords)!=-1){
                           newlist.push(element)
                       }
                   });
                   return newlist;
                   //第二种
                // this.list.filter(item=>{
                //     if(item.name.includes(keywords)){
                //         newlist.push(item);
                //     }
                // })
                // return newlist;
               }

4.全局过滤器

//全局过滤器，进行时间的格式化
        Vue.filter('dateFormat',function(){
            var dt=new Date();
            var year=dt.getFullYear();
            var m=dt.getMonth()+1;
            var day=dt.getDate();
            var hou=dt.getHours();
            var min=dt.getMinutes();
            var sec=dt.getSeconds();
            return `${year}-${m}-${day}-${hou}:${min}:${sec}`;

        })

这里return的是一个字符串模板格式

5.自定义按键：

@keyup.enter="add"

就是按下回车键的时候触发add函数

6.自定义指令：

 <input type="text" name="" id="" class="form-control" v-model="keywords" v-focus v-color="'blue'">

 Vue.directive('focus',{
            bind:function(){
                
            },
            inserted:function(el){//渲染到页面的时候会调用
                el.focus();
            },
            updated:function(){

            }
        })

Vue.directive('color',{
            bind:function(el,binding){
                el.style.color=binding.value;
            },
            inserted:function(el){
                el.focus();
            },
            updated:function(){

            }
        })

然后我们再搜索框的input加上 v-focus，这样就可以自动聚焦了

上面三个方法是的时机不同，详见：http://www.runoob.com/vue2/vue-custom-directive.html（很重要）

一般和样式相关的，一般在bind执行; 和行为相关的在inserted执行

另外还可以定义私有指令并且改成简单的形式：

 directives:{
                'fontcolor':function(el,binding){
                    el.style.color=binding.value;
                }
            }