【vue】品牌列表案例（1.1实训）

小张哎！

已于 2022-01-26 20:28:34 修改

阅读量624

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-01-01 16:47:03 首次发布

本文链接：https://blog.csdn.net/qq_45746744/article/details/122268095

版权

vue 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

基于 vue 渲染表格数据

接上一篇末尾
步骤1：使用 v-for 指令循环渲染表格的数据

<tr v-for="brand in brandlist" :key="brand.id">
	<td>{{brand.id}}</td>
	<td>{{brand.brandname}}</td>
	<td>{{brand.state}}</td>
	<td>{{brand.addtime}}</td>
	<td><a href="#">删除</a></td>
</tr>

步骤2：将品牌的状态渲染为 Switch 开关效果
Switch 开关效果的官方文档地址：
https://v4.bootcss.com/docs/components/forms/#switches

<div class="custom-control custom-switch">
	<!--checkbox-->
	<input type="checkbox" class="custom-control-input" 
		:id="brand.id" v-model="brand.state">
		<!--:for和上面的:id匹配-->
		<label class="custom-control-label" 
			:for="brand.id" v-if="brand.state">已启用</label>
		<label class="custom-control-label" 
			:for="brand.id" v-else>已禁用</label>
</div>

步骤3：使用全局过滤器对时间进行格式化

		filters:{   // 过滤器
			formatDate(str){
				const dt = new Date(str)
				const y = dt.getFullYear()
				const m = padZero(dt.getMonth() + 1)
				const d = padZero(dt.getDate())

				const hh = padZero(dt.getHours())
				const mm = padZero(dt.getMinutes())
				const ss = padZero(dt.getSeconds())
				return y+"-"+m+"-"+d+" "+hh+":"+mm+":"+ss;
			}
	    }

需要写一个补0的函数：

	function padZero(n){
		return n>9?n:'0'+n;
	}

<td>{{brand.addtime | formatDate }}</td>

目前效果如下：
在这里插入图片描述

删除品牌

步骤1：为删除的 a 链接绑定 click 点击事件处理函数，并阻止其默认行为。

<a href="#" @click.prevent="removeBrand(brand.id)">删除</a>

步骤2：在 methods 节点中声明 removeBrand 事件处理函数。

		methods:{
			//删除品牌，id是要删除的编号
			removeBrand(id){
				this.brandlist = this.brandlist.filter( (x) => {
					return x.id != id
				} );
			}
		}

添加品牌

步骤1：阻止表单的默认提交行为

<form class="form-inline" @submit.prevent>

步骤2：为 input 输入框进行 v-model 双向数据绑定
注意：需要在 data 数据中声明 brandname 属性字段

		<input type="text" class="form-control" placeholder="请输入品牌名"
			v-model.trim="brandname" />

步骤3：为“添加品牌”的 button 按钮绑定 click 事件处理函数

		<button type="submit" class="btn btn-primary mb-2"
			@click="addNewBrand">添加品牌</button>

步骤4：在 data 中声明 nextId 属性（用来记录下一个可用的 id 值），并在 methods 中声明addNewBrand 事件处理函数

nextid:4    //下一个品牌编号

//添加品牌
					addNewBrand(){
						if(this.brandname === '') return alert('品牌名不能为空')
						
						this.brandlist.push({
							id:this.id,
							brandname:this.brandname,
							state:true,
							addtime:new Date(),
						});
						//重置文本框的值
						this.brandname = '';
						this.nextid++
					}

步骤5：监听 input 输入框的 keyup 事件，通过 .esc 按键修饰符快速清空文本框中的内容

		<input type="text" class="form-control" placeholder="请输入品牌名"
			v-model.trim="brandname" @keyup.esc="brandname=''"/>

目前全部代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>

	<body>
		<div id="app">
			
			<form class="form-inline" @submit.prevent>
				<div class="input-group-prepend">
					<div class="input-group-text">品牌名称</div>
				</div>
				<!-- v-model.trim="brandname" 去掉空格
					@keyup.esc="brandname=''"
				-->
				<input type="text" class="form-control" placeholder="请输入品牌名"
					v-model.trim="brandname" @keyup.esc="brandname=''"/>
				<button type="submit" class="btn btn-primary mb-2"
					@click="addNewBrand">添加品牌</button>
			</form>
			
			<table border="1">
				<thead>
					<tr>
						<td>品牌编号</td>
						<td>状态</td>
						<td>品牌名称</td>
						<td>添加时间</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="brand in brandlist" :key="brand.id">
						<td>{{brand.id}}</td>
						<td>
							<div class="custom-control custom-switch">
							  <!-- checkbox -->
							  <input type="checkbox" class="custom-control-input" 
							  	:id="brand.id" v-model="brand.state">
							  <!-- :for和上面的:id匹配 -->
							  <label class="custom-control-label" 
							  	:for="brand.id" v-if="brand.state">已启用</label>
							  <label class="custom-control-label" 
							  	:for="brand.id" v-else>已禁用</label>
							</div>
						</td>
						<td>{{brand.brandname}}</td>
						<!-- formatDate过滤器 -->
						<td>{{brand.addtime | formatDate }}</td>
						<td>
							<!-- 1. 删除品牌click事件 -->
							<a href="#" @click.prevent="removeBrand(brand.id)">删除</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<script type="text/javascript" src="./js/vue.js"></script>
		<script>
			// 补0函数
			function padZero(n){
				return n>9?n:'0'+n;
			}
			
			const vm = new Vue({
				el: '#app',
				data: {
					brandlist: [ // 品牌列表
						{
							id: 1,
							brandname: '奔驰',
							state: true,
							addtime: new Date()
						},
						{
							id: 2,
							brandname: '宝马',
							state: true,
							addtime: new Date()
						},
						{
							id: 3,
							brandname: '奥迪',
							state: false,
							addtime: new Date()
						},
					],
					// 品牌名
					brandname:'',
					nextId:4,   // 下一个品牌编号
				},
				filters:{   // 过滤器
					formatDate(str){
						const dt = new Date(str)
						const y = dt.getFullYear()
						const m = padZero(dt.getMonth() + 1)
						const d = padZero(dt.getDate())
		
						const hh = padZero(dt.getHours())
						const mm = padZero(dt.getMinutes())
						const ss = padZero(dt.getSeconds())
						// 返回格式化后的日期
						return y+"-"+m+"-"+d+" "+hh+":"+mm+":"+ss;
					}
				},
				methods:{
					// 删除品牌,id是要删除的编号
					removeBrand(id){
						this.brandlist = this.brandlist.filter( (x) => {
							return x.id != id
						});
					},  // 不要忘记逗号
					// 添加品牌
					addNewBrand(){
						if(this.brandname === '') return alert('品牌名不能为空')
						
						this.brandlist.push({
							id:this.nextId,
							brandname:this.brandname,
							state:true,
							addtime:new Date(),
						});
						// 重置文本框的值
						this.brandname = ''
						this.nextId ++;
						
					},
				}
			});
		</script>
	</body>

</html>

目前效果：
在这里插入图片描述

小张哎！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【vue】品牌列表案例（1.1实训）

基于 vue 渲染表格数据步骤1：使用 v-for 指令循环渲染表格的数据<tr v-for="brand in brandlist" :key="brand.id"> <td>{{brand.id}}</td> <td>{{brand.brandname}}</td> <td>{{brand.state}}</td> <td>{{brand.addtime}}</td> <td&
复制链接

扫一扫