<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<style>
td,th{
width: 150px;
height: 50px;
border: 1px solid ;
}
</style>
</head>
<body>
<div id="app">
<table>
name:<input type="text" v-model="names" >{{name}}<br>
age:<input type="number" v-model.number="ages">
<br>
sex:
<select name="" id="" v-model="selected">
<option v-for="item in items" :value="item.value" >{{item.text}}</option>
</select>
<!--<span>{{selected}}</span>-->
<br>
<button @click="nsm()">添加</button>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Delte</th>
</tr>
<tr v-for="(item,index) in arr">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td><button @click="del(index)">删除</button></td>
</tr>
</thead>
</table>
</div>
<script>
new Vue({
el:"#app",
data:{
flags:true,
arr:[{name:'Jack',age:'30',sex:'Male'},{name:'Bill',age:'26',sex:'Male'},{name:'Tracy',age:'22',sex:'Female'},{name:'Chris',age:'36',sex:'Male'}],
items:[{text:"男",value:"Male"},{text:"女",value:"Female"}],
selected:"Male",
names:'',
ages:'',
},
methods:{
del(index){
this.arr.splice(index,1);
},
nsm(){
var data={
name:this.names,
age:this.ages,
sex:this.selected,
}
for (var i=0;i<this.arr.length;i++){
for (var j=0; j<this.arr.length;j++){
if (data.name == this.arr[i].name) {
alert(1)
break;
}
}
if (data.name==''&&data.age==''){
// alert("内容不能为空")
break;
}else{
this.arr.push(data)
break;
}
}
}
}
})
</script>
</body>
</html>
