vue 实现品牌列表源码

最新推荐文章于 2022-06-21 14:43:39 发布

卟良亻

最新推荐文章于 2022-06-21 14:43:39 发布

阅读量497

点赞数

本文链接：https://blog.csdn.net/weixin_42595284/article/details/82994067

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>品牌列表</title>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
	<div id="app">
		<div class="panel panel-primary">
			<div class="panel-heading"><p class="panel-title">添加品牌</p></div>
			<div class="panel-body form-inline">
				<label>
					ID:<input class="form-control" type="text" v-model='id'>
				</label>
				<label>
					NAME:<input class="form-control" type="text" v-model='name' @keyup.enter='add'>
				</label>
					<input class="btn btn-primary" type="button" value="添加" @click='add'>
				<label>
					请输入关键字:<input class="form-control" type="text" v-model='keyWords' v-focus>
				</label>
			</div>
		</div>
		<table class="table table-bordered table-hover">
			<thead>
				<tr>
					<th>ID</th>
					<th>Name</th>
					<th>Time</th>
					<th>Opration</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for = "item in search(keyWords)" :key='item.id'>
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{ item.timer | dataFormrt }}</td>
					<td><a href="#" @click.prevent='del(item.id)'>删除</a></td>
				</tr>
			</tbody>
		</table>
	</div>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.min.js"></script>
	<script type="text/javascript">
		Vue.config.keyCodes.enter=13;
		let vm = new Vue({
			el:'#app',
			data:{
				list:[
					{id:1,name:'兰博基尼',timer:new Date()},
					{id:2,name:'劳斯莱斯',timer:new Date()},
					{id:3,name:'宝马',timer:new Date()},
					{id:4,name:'奔驰',timer:new Date()},
					{id:5,name:'野马',timer:new Date()},
					{id:6,name:'保时捷',timer:new Date()},
					{id:7,name:'奥迪',timer:new Date()},
				],
				id:'',
				name:'',
				keyWords:''
			},
			methods:{
				del(id){
					this.list.some((element,index)=>{
						if (element.id == id) {
							console.log(element.id == id);
							this.list.splice(element,1)
						}
					})
				},
				add(){
					if (!this.id || !this.name) return false
					console.log(this.id,this.name)
					this.list.unshift({id:this.id,name:this.name,timer:new Date()})
				},
				search(keyWords){
					return this.list.filter((item, i)=> {
						if (item.name.includes(keyWords)) {
							return item;
						}
					});
				}

			},
			filters:{
				'dataFormrt':function (data) {
					let dt = new Date(data);
					let y = dt.getFullYear();
					let m = (dt.getMonth()+1).toString().padStart(2,'0');
					let d = dt.getDate().toString().padStart(2,'0');
					let h = dt.getHours().toString().padStart(2,'0');
					let mm = dt.getMinutes().toString().padStart(2,'0');
					let s = dt.getSeconds().toString().padStart(2,'0');

					return ` ${y}-${m}-${d} ${h}:${mm}:${s} `
				}
			},
			directives:{
				'focus':{
					inserted:function (el) {
						el.focus();
					}
				}
			}
		})
	</script>
</body>
</html>

卟良亻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 实现品牌列表源码

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;品牌列表&lt;/title&gt; &lt;link rel="stylesheet" type="text/css"
复制链接

扫一扫