您的位置：首页 > Web前端 > Vue.js

Vue的使用--简单学生信息录入系统

2019-04-26 07:32 148 查看

功能实现：

从数组中循环得到已有学生数据放入表格
新增学生信息能够插入到表格中
表格中能够对学生信息进行删除操作

代码如下（实现思路和注意点已在代码中注明）

<body>

<div id="app">
<fieldset>
<legend>学生信息录入系统</legend>
<!--<form>-->
<div>
<span>姓名：</span>
<input type="text"  placeholder="请输入姓名"v-model="stu.name">
</div>

<div>
<span>年龄：</span>
<input type="text" v-model="stu.age" placeholder="0">
</div>

<div>
<span>性别：</span>
<select  v-model="stu.gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
<!--{{stu.gender}}-->
</div>

<div>
<span>手机：</span>
<input type="text" v-model="stu.phone" placeholder="请输入手机号码">
</div>
<!--<div>{{stu}}</div>-->

<div>
<!--v-on监听DOM事件来触发一些js代码  简化方式@-->
<!--attention！！！button在表单中默认的是submit功能，
所以一开始我一插入新数据，界面刷新一下，也不会报错，直到加了type=button
现在已经将form标签注释，这句话可要可不要
在form中使用按钮标签，最好通过type指定类型或使用input  type=button-->
<button type="button"  @click="createnewstu()">创建新用户</button>
</div>
<!--</form>-->
</fieldset>

<table>
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>手机</td>
<td>删除</td>
</tr>
</thead>
<tbody>
//从数组students[]中循环遍历加入到表格中
<tr v-for="(s,index) in students">
<td>{{s.name}}</td>
<td>{{s.gender}}</td>
<td>{{s.age}}</td>
<td>{{s.phone}}</td>
<td><button @click="deletethisline(index)">删除</button></td>
</tr>
</tbody>
</table>
</div>

<script>
//1.创建Vue的实例
new Vue({
el:"#app",
data:{
students:[
{name:"张三",gender:"男",age:"18",phone:"123456"},
{name:"李四",gender:"男",age:"19",phone:"123457"},
{name:"王五",gender:"女",age:"20",phone:"123458"},
{name:"刘六",gender:"女",age:"21",phone:"123459"}
],
stu:{name:"",gender:"",age:"",phone:""}
},
methods:{
createnewstu:function(){
if(this.stu.name==""){
alert("请输入正确的名字")
}else if(this.stu.age<0){
alert("请输入正确的年龄")
}else if(this.stu.phone==""){
alert("请输入正确的手机号码")
}else{
// console.log("111") 方法不能实现，所以写这句话测试一下有没有进这个方法
//  this.stu.push(this.students);
this.students.unshift(this.stu);
console.log(this.stu);
//重新赋值，相当于重新给了个地址，将双向绑定解除了，不然下次添加时，上次数据会改变
this.stu={name:"",gender:"男",age:"0",phone:""};
}
},
deletethisline:function(index){
//splice(index,number)删除索引后面的number个元素
this.students.splice(index,1);
}
}
})

</script>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航