VUE小界面

最新推荐文章于 2024-06-11 01:02:06 发布

沧海·

最新推荐文章于 2024-06-11 01:02:06 发布

阅读量263

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_45286744/article/details/119893808

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述
为了学习前端VUE知识，做了第一个VUE界面，为了熟悉命令，界面比较丑，下面贴出代码。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.class</title>
    <style> 
thead{
	background-color: aqua;
}
table{
	border: 1px solid  coral;
}
    </style>
</head>
<body>
    <div id="app">
		<fieldset>
			<legend>弘峰vue小界面</legend>
			<div>
				<span>
					姓名
				</span>
				<input type="text" placeholder="请输入姓名" v-model="newstudent.name" />
			</div>
			<div>
				<span>
					年龄
				</span>
				<input type="text" placeholder="请输入年龄" v-model="newstudent.age" />
			</div>
			
			<div>
				<span>
					性别
				</span>
				<select v-model="newstudent.sex">
					 <option value="男">男</option>
					 <option value ="女">女</option>
				</select>
			</div>
			
			<div>
				<span>
					手机号
				</span>
				<input type="text" placeholder="请输入手机号" v-model="newstudent.tel" />
			</div>
			<button type="button" @click="create()">创建</button>
		</fieldset> 
		<table>
			<thead>
			   <tr>
				<td>姓名</td>
				<td>年龄</td>
				<td>性别</td>
				<td>手机号</td>
				<td>操作</td>
			   </tr>
			</thead> 
			<tr v-for="(item,index) in pr">
				<td>{{item.name}} </td>
				<td>{{item.age}}</td>
				<td>{{item.sex}}</td>
				<td>{{item.tel}}</td>
				<td><button type="button"  @click="del(index)">删除</button></td>
			</tr>
		</table>
    </div>
<script src="js/vue.js"></script>
<script> 
		let ve=new  Vue({
			el:'#app',
			data:{
				pr:[
					{name:'ww',age:23,sex:'女',tel:'8888'},
					{name:'aa',age:22,sex:'男',tel:'8888888'},
					{name:'qwe',age:14,sex:'男',tel:'18888888'}
				],
				newstudent:{name:'',age:0,sex:'男',tel:''},
			},
			methods:{
				 create(){
					 if(this.newstudent.name===''){
						 alert('不能为空');
						 return;
					 }
					 this.pr.unshift(this.newstudent);
					 this.newstudent={name:'',age:0,sex:'男',tel:''};
				 },
				 del(index){
					this.pr.splice(index,1)
				 }
			}
		});
</script>
</body>
</html>

沧海·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE小界面

为了学习前端VUE知识，做了第一个VUE界面，为了熟悉命令，界面比较丑，下面贴出代码。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2.class</title> <style> thead{ background-color: aqua;}table{ border: 1px solid .
复制链接

扫一扫

专栏目录