品牌列表渲染
本文用到以下三个包，若需要尝试本文的vue网页，请自行下载
其中bootstrap是设置了表格的边框、宽度等一系列操作，若想自行写css那么可以不导该包
dayjs.min.js该包是对vue渲染的数据进行了一个格式化处理，若不需要格式化，也可以不用下载
vue.js必导，请到官网自行下载（下面有简单的教程，若还是不会请留言或者私信）
点击此链接或者上面的官网可跳入Vue.js官网
index.html
<!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" type="text/css" href="./lib/bootstrap.css" />
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="app">
<!-- 卡片区域-->
<div class="card">
<div class="card-heard">
添加品牌
</div>
<div class="card-body">
<!-- form表单元素有submit事件-->
<form @submit.prevent="add">
<div class="form-row align-item-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="button">
<button type="submit" class="btbm btm-primary mb-2">添加</button>
</div>
</div>
</form>
</div>
</div>
<!-- 表格区域-->
<table class="table table-border 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="item in list" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>
<div class="cunstom-control cunstom-switch">
<!-- lable 设置滑动checkbox-->
<label class="huadong">
<!-- checkbox-->
<input type="checkbox" style="display: none;" class="custom-control-input" :id="'cunstomSwich'+item.id" v-model="item.status">
<!-- 滑动的圆圈-->
<div class="check"></div>
<!-- 底色-->
<div class="circle"></div>
</label>
<!-- 设置是否禁用-->
<label class="custon-control-label" :for="'cunstomSwich'+item.id" v-if="item.status == true">已启用</label>
<label class="custon-control-label" :for="'cunstomSwich'+item.id" v-else>已禁用</label>
</div>
</td>
<td>{{ item.time | dateformat }}</td>
<td>
<a href="javascript:;" @click="remove(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script src="./lib/vue.js"></script>
<script src="./lib/dayjs.min.js"></script>
<!-- 2.创建Vue的实例对象-->
<script>
Vue.filter('dateformat', function (time){
//1、对time进行格式化处理，得到yyyy-mm-dd hh:mm:ss
//2、把格式化的结果，return出去
const dtStr = dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
return dtStr
})
const vm = new Vue({
//el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
//data对象就是要渲染到页面上的数据
data:{
//用户输入的品牌名称
brand: '',
//下一个可用的id
nextid: 4,
//品牌数据列表
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的作用就是定义事件的处理函数
methods:{
remove(id){
this.list = this.list.filter(item => item.id !== id)
},
//阻止表单的默认提交行文之后，触发add方法
add(){
//若果判断到brand的值为空字符，则return出去
if(this.brand == ''){ return alert('必须填写品牌名称')}
//如果没有被return出去，应该执行添加逻辑
//1、先把要添加的品牌对象，整理出来
//往this.list数组中push步骤 1 中的对象
//3、清空 this.brand ；让 this.nextid 自增 +1
const obj = {
id : this.nextid,
name: this.brand,
status: true,
time: new Date(),
}
this.list.push(obj)
this.brand = ''
this.nextid++
},
},
})
</script>
</body>
</html>
index.css
* {
margin: 0;
padding: 0;
border: none;
}
#app{
margin-top: 10px;
margin-left: 10px;
border-radius: 3px;
margin-right: 10px;
}
.card{
height: 145px;
width: 1900px;
}
.card-heard{
background-color: #f3f3f3f3;
padding-top: 15px;
padding-left: 15px;
padding-bottom: 15px;
}
.col-auto {
width: 315px;
height: 39px;
float: left;
}
.button{
height: 39px;
width: 63px;
float: left;
margin-left: 10px;
}
.btbm{
height: 39px;
width: 63px;
background-color: #0072F6;
color: #fff;
border-radius: 7px;
text-align: center;
}
.huadong{
position: relative;
z-index: 1;
}
.check{
width: 1.5rem;
height: .8rem;
border-radius: 100rem;
border: 1px solid #dddddd;
transition: .3s;
}
.circle{
width: .8rem;
height: .8rem;
border-radius: 50%;
background: #fff;
position: absolute;
left: 1px;
top: 1px;
transform: translateX(0rem);
transition: .3s;
}
input:checked ~.check{
background: #0072F6;
transition: .3s;
border-color: #0072F6;
}
input:checked ~ .circle{
transform: translateX(.7rem);
transition: .3s;
}