分享一下我制作的Vue指令综合练习
效果如下图：
HTML代码如下:
步骤1：在一个div#app里分为两个部分
第一部分：制作的输入框
<fieldset>
<legend>学生录入系统</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.phone">
</div>
<button @click="createNewStu()">创建新用户</button>
</fieldset>
解析：input用v-model实现动态绑定数据
第二部分：表格显示
<table>
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>手机</td>
<td>删除</td>
</tr>
</thead>
<tbody>
<tr v-for="(stu, index) in students" :key="index">
<td>{{stu.name}}</td>
<td>{{stu.sex}}</td>
<td>{{stu.age}}</td>
<td>{{stu.phone}}</td>
<td>
<button @click="delStudent(index)">删除</button>
</td>
</tr>
</tbody>
</table>
解析：v-for遍历数组
css代码如下：
<style>
#app {
margin: 50px auto;
width: 600px;
}
fieldset {
border: 1px solid orangered;
margin-bottom: 20px;
}
fieldset input {
width: 200px;
height: 30px;
margin: 10px 0;
}
table {
width: 600px;
border: 2px solid orangered;
text-align: center;
}
thead {
background-color: orangered;
}
</style>
JS代码如下：
new Vue({
el: '#app',
data: {
students: [
{ name: '张三', sex: '女', age: 19, phone: '18921212121' },
{ name: '李四', sex: '男', age: 29, phone: '18921221121' },
{ name: '王五', sex: '女', age: 39, phone: '18921788721' },
{ name: '赵六', sex: '男', age: 49, phone: '18921556121' }
],
newStudent: { name: '', sex: '男', age: 0, phone: '' }
},
methods: {
// 插入记录
createNewStu() {
// 1. 姓名不能为空
if (this.newStudent.name === '') {
alert('姓名不能为空!');
return;
}
// 2. 验证年龄
if (this.newStudent.age <= 0) {
alert('请输入正确的年龄!');
return;
}
// 3. 验证手机
if (this.newStudent.phone === '') {
alert('请输入正确的手机号码!');
return;
}
// 4. 插入新纪录
this.students.unshift(this.newStudent);
// 5. 清空数据
this.newStudent = { name: '', sex: '男', age: 0, phone: '' }
},
// 删除记录
delStudent(index) {
this.students.splice(index, 1);
}
}
});
第一次制作，笔记很少，有所欠缺，希望有所提高！
如果你有幸读到这篇文章，希望不要吐槽啦。。。。。。
网友评论