看一眼就会的Vue3简单数据添加-CFANZ编程社区

看一眼就会的Vue3简单数据添加
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据添加</title>
		<script src="js/vue.js"></script>
		<style type="text/css">
			.box{
				float: left;
				margin-right: 30px;
			}
			button{
				background-color: #fff;
				border: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="box">
			<p><input type="text" placeholder="输入编号" v-model="num"></p>
			<p><input type="text" placeholder="输入名称" v-model="main"></p>
			<button @click="add()">添加数据</button>
			</div>
			<table border="1" rules="all" cellpadding="10">
				<tr bgcolor="#008000">
					<th>编号</th>
					<th>品牌</th>
					<th>创建时间</th>
					<th>操作</th>
				</tr>
				<tr v-for="item in list">
					<td>{{item.num}}</td>
					<td>{{item.main}}</td>
					<td>{{item.time}}</td>
					<td><button @click="remove(item)">移除</button></td>
				</tr>
			</table>
			
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						//所有的数据集合在一起的对象
						list: [
							{num:"1",main:"宝马",time:"2022-2-25 20:50:52"}
						],
						num: '', //编号
						main: '' ,//名称
						time:''  //时间
					}
				},
				methods: {
					add() {
						// 获取当前时间
						var mydate = new Date()
						// 把当前时间添加到time里
						this.time= mydate.toLocaleString()
						// 把所有的数据赋值给obj
						var obj = {num:this.num,main:this.main,time:this.time}
						// 添加到list里面
						this.list.push(obj)
						// 清空input
						this.num = ''
						this.main = ''
						

					},
					remove(item) {
					// 找当前下标为item的对象
					var ind = this.list.indexOf(item)
					// 删除
					this.list.splice(ind,1)
					}
				}

			}).mount("#app")
		</script>
	</body>
</html>
0 条评论