提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue--综合练习（品牌列表渲染）

Vue列表 -- 练习 渲染 综合 品牌
2023-09-27 14:26:51 时间

vue--综合练习（品牌列表渲染）

需求

  • 数据渲染
  • 添加数据
  • 删除数据
  • 数据过滤

界面

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>品牌列表渲染</title>
   <script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>
  <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
</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">
        </label>

        <label>
          Color:
          <input type="text" class="form-control" v-model="color">
        </label>

        <input type="button" value="添加" class="btn btn-primary" @click="add">

        <label>
          关键字搜索(color,name)：
          <input type="text" class="form-control" v-model="keywords">
        </label>

      </div>
    </div>

    <table class="table table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Color</th>
          <th>Ctime</th>
          <th>Operation</th>
        </tr>
      </thead>
      <tbody>
        <!-- 之前， v-for 中的数据，都是直接从 data 上的list中直接渲染过来的 -->
        <!-- 现在， 我们自定义了一个 search 方法，同时把 所有的关键字，通过传参的形式，传递给了 search 方法 -->
        <!-- 在 search 方法内部，通过 执行 for 循环， 把所有符合 搜索关键字的数据，保存到 一个新数组中，返回 -->
        <tr v-for="item in search(keywords)" :key="item.id">
          <td v-text='item.id'></td>
          <td v-text='item.name' ></td>
          <td v-text='item.color' ></td>
          <td v-text='item.ctime'></td>
          <td> <a  href="#" @click.prevent="del(item.id)">删除</a> </td>
        </tr>
      </tbody>
    </table>
  </div>

  <script>
        let vm=new Vue({
            el:"#app",
            data:{
                id:"",
                name:"",
                color:"",
                keywords:"",
                list:[
                    {
                        id:"1",
                        name:"奔驰",
                        color:"white",
                        ctime:new Date()
                    },{
                        id:"2",
                        name:"宝马",
                        color:"white",                     
                        ctime:new Date()
                    },{
                        id:"3",
                        name:"福特",
                        color:"red",                      
                        ctime:new Date()
                    }
                ]
            },
            methods:{
                add(){
                    this.list.push({"id":this.id,"name":this.name,"color":this.color,"ctime":new Date()})
                    this.id=""; this.name="";this.color="";
                },
                del(id){
                    if(confirm("确定删除吗？")){
                    //根据Id删除数据，并确定对应索引，调用数组的splice方法删除
                     this.list.forEach((item,i)=>{
                            if(item.id==id){
                                this.list.splice(i,1);
                            }
                        })
                    }
                },
                search(keywords){
                    //关键词过滤
                    return this.list.filter((item)=>{
                        if(item.name.includes(keywords)||item.color.includes(keywords)){
                            return item;
                        }
                    })

                }
            }
        })
  </script>
</body>
</html>

学习资源推荐：https://blog.csdn.net/qq_42813491/article/details/90213353

相关文章