Vue入门学习小例子

最新推荐文章于 2024-07-23 17:06:34 发布

top、cxy

最新推荐文章于 2024-07-23 17:06:34 发布

阅读量650

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/wen_3370/article/details/79418307

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<center>
	<div id="app">
		<p>
		姓名 <input type="text" v-model="datas.name"> 
		性别 <input type="text" v-model="datas.sex"> 
		年龄 <input type="text" v-model="datas.age"> 
		<button @click="insert">增加</button>
		</p>
		<table>
			<tr>
				<th>ID</th>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>操作</th>
			</tr>
			<tr v-for="(user,index) in users">
				<td>{{ index + 1}}</td>
				<td>{{user.name}}</td>
				<td>{{user.sex}}</td>
				<td>{{user.age}}</td>
				<td><button @click="remove(index)">删除</button></td>
			</tr>
		</table>
	</div>
</center>
	
</body>
</html>
<script>
	var vm = new Vue({
		//指定作用域
		el:'#app',
		//数据绑定
		data:{
			datas:{ 'name' : '', 'sex' : '' ,'age' : ''},//新增数据
			
			users:[
			{  'name' : 'zhangsan', 'sex' : 'man' ,'age' : '12'},
			{ 'name' : 'lisi','sex':'man','age':'16'},
			{ 'name' : 'wangwu', 'sex' : 'woman' , 'age' : '18'}
			]
		},
		//方法
		methods:{
			insert:function() {
				this.users.push(this.datas);//将新增数据放到users数组中
			},
			remove:function(index){
				this.users.splice(index,1);//通过索引删除数据 
			}
		}
	})
</script>

知识点：此次用到了数据地双向绑定来实现数据地新增，v-for 循环。