<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h3>vue动态添加删除数据</h3>
<input class="addWord" v-model.lazy="name" @focus="" @blur="nameVertify" @keyup.enter="$event.target.blur" type="text" placeholder="姓名"/>
<input class="addWord" v-model.lazy="age" @blur="ageVertify" @keyup.enter="$event.target.blur" type="number" placeholder="年龄"/>
<input class="addWord" v-model.lazy="sex" @blur="sexVertify" @keyup.enter="$event.target.blur" type="text" placeholder="性别"/>
<input class="addWord" v-model.lazy="tel" @blur="telVertify" @keyup.enter="$event.target.blur" type="number" placeholder="联系方式"/>
<input class="addWord" v-model.lazy="id" @blur="idVertify" @keyup.enter="$event.target.blur" type="number" placeholder="工号"/>
<button @click="addUser">添加</button>
<span class="unshow" :class="{show:show}" v-model="alertWord">{{alertWord}}</span>
<hr>
<table>
<caption>用户信息表</caption>
<tr>
<th class="center">序号</th>
<th class="center">姓名</th>
<th class="center">年龄</th>
<th class="center">性别</th>
<th class="center">联系方式</th>
<th class="center">工号</th>
<th class="center">操作</th>
</tr>
<tr v-for="(user,index) in users">
<th class="center">{{index+1}}</th>
<th class="center">{{user.name}}</th>
<th class="center">{{user.age}}</th>
<th class="center">{{user.sex}}</th>
<th class="center">{{user.tel}}</th>
<th class="center">{{user.id}}</th>
<th class="center">
<button @click="deleteUser(index)">删除</button>
</th>
</tr>
<tr v-show="users.length!=0">
<td colspan="7" class="right">
<button @click="deleteUser('-2')">删除全部</button>
</td>
</tr>
<tr v-show="users.length==0">
<td colspan="7" class="center">
<p>暂无数据...</p>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'vue 属性练习',
users:[],
name:'',
age:'',
sex:'',
tel:'',
id:'',
alertWord:'',
show:false
}
},
methods:{
addUser:function(){
var name = this.name.trim();
var age = this.age;
var sex = this.sex.trim();
var tel = this.tel;
var id = this.id;
if(name!=""&&age!=""&&sex!=""&&tel!=""&&id!=""){
this.users.push({
name:name,
age:age,
sex:sex,
tel:tel,
id:id
})
this.name = "";
this.age = "";
this.sex = "";
this.tel = "";
this.id = "";
this.show = false;
this.alertWord = '';
}else{
this.show = true;
this.alertWord = '请输入完整的用户信息';
}
},
deleteUser:function(index){
if(index == "-1"){
this.users = [];
}else{
this.users.splice(index,1);
}
},
nameVertify:function(){
var name = this.name.trim();
if(name != ""){
this.show = false;
this.alertWord = '';
}else{
this.show = true;
this.alertWord = '姓名输入有误,请重新输入';
}
},
ageVertify:function(){
var age = this.age;
if(age != ""){
this.show = false;
this.alertWord = '';
}else{
this.show = true;
this.alertWord = '年龄输入有误,请重新输入';
}
},
sexVertify:function(){
var sex = this.sex.trim();
if(sex != ""){
this.show = false;
this.alertWord = '';
}else{
this.show = true;
this.alertWord = '性别输入有误,请重新输入';
}
},
telVertify:function(){
var tel = this.tel;
if(tel != ""){
this.show = false;
this.alertWord = '';
}else{
this.show = true;
this.alertWord = '电话输入有误,请重新输入';
}
},
idVertify:function(){
var id = this.id;
if(id != ""){
this.show = false;
this.alertWord = '';
}else{
this.show = true;
this.alertWord = '工号输入有误,请重新输入';
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1{
font-weight: normal;
}
th{
width: 80px;
}
a {
color: #42b983;
}
.unshow{
opacity: 0;
}
.show{
opacity: 1;
color: red;
}
.right{
text-align: right;
}
.center{
text-align: center;
}
</style>
引用
<template>
<div id="app">
<!--<img src="./assets/logo.png">-->
<HelloWorld></HelloWorld>
<!--<router-view/>-->
</div>
</template>
<script>
// 导入组件
import HelloWorld from './components/HelloWorld'
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/*text-align: center;*/
color: #2c3e50;
margin-top: 60px;
}
</style>
结果: