使用vue常见指令实现案列_vue复选框的brand:-CSDN博客

本文链接：https://blog.csdn.net/weixin_44364634/article/details/122542781

vue实现品牌列表案例

要实现以下功能

实现列表的循环
实现复选框的功能
实现商品的删除
实现商品的添加

1.1 实现列表的循环

1.1.1 写出数据，实现列表数据的循环

vue提供v-for来实现，需要注意的是，使用v-for一般还需要使用:key来绑定

<tbody>
    <!--循环的是tr行的数据，所以在这里写v-for实现循环-->
    <tr  v-for="item in list" :key="item.id">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>
        <div class="custom-control custom-switch">
          <!-- 使用 v-model 实现双向数据绑定 -->
          <input type="checkbox" class="custom-control-input"  >
          <!-- 使用 v-if 结合 v-else 实现按需渲染 -->
          <label class="custom-control-label" for="customSwitch1" >已启用</label>
          <label class="custom-control-label" for="customSwitch1">已禁用</label>
        </div>
      </td>
      <td>{{ item.time }}</td>
      <td>
        <a href="javascript:;">删除</a>
      </td>
    </tr>
</tbody>

1.2 接着处理复选框

实现后台数据的状态改变，并且确保状态的单选（v-model和v-if/v-else），接着实现选择的状态对应相同的id

在这里插入图片描述

1.3 实现商品的删除

当点击删除时，会有对应的事件产生，则需要用到v-on (简写为@)

<td>
  <a href="javascript:;" @click="del(item.id)">删除</a>
</td>

接着实现点击删除事件的方法

// 点击链接，删除对应的品牌信息
del(id){
 this.list = this.list.filter(item => item.id !== id)
}

1.4 实现商品的添加

1.4.1 实现效果

在这里我们需要获取到品牌的名称，然后点击添加事件后，会添加在最后面，这时候也要注意要有id值的变化。
alt

1.4.2 首先先在data中定义一个nextid的值和一个品牌的名字，这样的目的是为了后面添加数据比较方便#### 1.4.3 实现表单的数据添加

这里需要用到事件修饰符，prevent组织页面的重新加载
在这里插入图片描述

1.4.3 实现添加事件方法

先创建一个数组，写入添加后对应的数据

const obj = {
  id:this.nextId,
  name:this.brand,
  status:true,
  time:new Date()
}

把数据添加到列表末尾——this.list.push(obj)
将上方的品牌名字清空，并实现id自加this.brand = " " ;this.nextId++;
最后完善一下输入框输入品牌名称不能为0，且数据要与后台数据双向绑定

总代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>品牌列表案例</title>
  <link rel="stylesheet" href="./lib/bootstrap.css">
  <link rel="stylesheet" href="./css/brandlist.css">
  /*brandlist.css只有三行代码：
  body {
		 padding: 15px;
		 user-select: none;
	}*/


</head>

<body>
<div id="app">
  <!-- 卡片区域 -->
  <div class="card">
    <div class="card-header">
      添加品牌
    </div>
    <div class="card-body">
      <!-- 添加品牌的表单区域 -->
      <!-- form 表单元素有 submit 事件 -->
      <form @submit.prevent="add">
        <div class="form-row align-items-center">
          <div class="col-auto">
            <div class="input-group mb-2">
              <div class="input-group-prepend">
                <div class="input-group-text">品牌名称</div>
              </div>
              <input type="text" class="form-control" placeholder="请输入品牌名称" v-model.trim="brand">
            </div>
          </div>
          <div class="col-auto">
            <button type="submit" class="btn btn-primary mb-2">添加</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- 表格区域 -->
  <table class="table table-bordered table-hover table-striped">
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">品牌名称</th>
      <th scope="col">状态</th>
      <th scope="col">创建时间</th>
      <th scope="col">操作</th>
    </tr>
    </thead>
    <tbody>
    <!--循环的是tr行的数据，所以在这里写v-for实现循环-->
    <tr  v-for="item in list" :key="item.id">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>
        <div class="custom-control custom-switch">
          <!-- 使用 v-model 实现双向数据绑定 -->
          <input type="checkbox" class="custom-control-input" v-model="item.status" :id="'cb'+ item.id">
          <!-- 使用 v-if 结合 v-else 实现按需渲染 -->
          <label class="custom-control-label" :for="'cb'+ item.id" v-if="item.status">已启用</label>
          <label class="custom-control-label" :for="'cb'+ item.id" v-else>已禁用</label>
        </div>
      </td>
      <td>{{ item.time }}</td>
      <td>
        <a href="javascript:;" @click="del(item.id)">删除</a>
      </td>
    </tr>
    </tbody>
  </table>
</div>

<script src="./lib/vue-2.6.12.js"></script>

<script>
const vm = new Vue({
  el:'#app',
  data:{
    nextId:4,
    brand:"",
    list:[
      { id:1 , name:"宝马" , status:true , time:new Date() },
      { id:2 , name:"奔驰" , status:false , time:new Date() },
      { id:3 , name:"奥迪" , status:true , time:new Date() },
    ],
  },
  methods:{
    // 点击链接，删除对应的品牌信息
    del(id){
     this.list = this.list.filter(item => item.id !== id)
    },
    add(){
      if (this.brand === '') return alert('必须填写品牌名称！')

      const obj = {
        id:this.nextId,
        name:this.brand,
        status:true,
        time:new Date()
      }
      this.list.push(obj);
      this.brand = '';
      this.nextId++;
    }
  },
})
</script>

</body>

</html>