<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script type="text/javascript">
window.onload = function() {
new Vue({
el: "#app",
data: {
UserData: [{
UserName: 'data1',
UserPassword: 'data2',
UserCheicked: ['吃'].join(''),
UserAge:'18',
UserSex: '男',
UserHobby: '吃,喝',
UserCity: '驻马店',
UserText: 'data3',
UserOperation: ''
}],
Name: '',
Password: '',
Cheicked: ['吃'],
Age:'',
Sex: '男',
Hobby: '',
City: '南阳',
Text: '',
Operation: ''
},
methods: {
del:function(index){
this.UserData.splice(index,1)
},
add: function(index) {
this.UserData.push({
UserName: this.Name,
UserPassword:this.Password,
UserCheicked:this.Cheicked.join(','),
UserAge:this.Age,
UserSex:this.Sex,
UserHobby:this.Hobby,
UserCity:this.City,
UserText:this.Text,
UserOperation:this.Operation
}),
this.Name= ''
this.Password=''
this.Cheicked=['吃']
this.Age=''
this.Sex="男"
this.Hobby=''
this.City='南阳'
this.Text=''
this.Operation=''
}
}
})
}
</script>
</head>
<body>
<div id="app" class="text-center">
<table class="table table-striped table-hover table-light">
<tr>
<th>用户名</th>
<th>密码</th>
<th>性别</th>
<th>年龄</th>
<th>爱好</th>
<th>城市</th>
<th>文本域</th>
<th colspan="2">操作</th>
</tr>
<tr v-for="(item,index) in UserData">
<td>{{item.UserName}}</td>
<td>{{item.UserPassword}}</td>
<td>{{item.UserCheicked}}</td>
<td>{{item.UserAge}}</td>
<td>{{item.UserSex}}</td>
<td>{{item.UserHobby}}</td>
<td>{{item.UserCity}}</td>
<td>{{item.UserText}}</td>
<td ><button @click="item.UserAge++">修改</button>{{item.UserOperation}}<button type="button" @click="del()">删除</button></td>
</tr>
</table>
<form method="get">
<table class="form-box w-50">
<tr>
<td>用户名：<input type="text" v-model="Name" class="form-control" /></td>
</tr>
<tr>
<td>密码：<input type="text" v-model="Password" class="form-control" /></td>
</tr>
<tr>
<td>性别：<input type="radio" checked="checked" v-model="Sex" name="sex"
value="男" />男<input type="radio" name="sex" v-model="Sex" value="女" />女
</td>
</tr>
<tr>
<td>
年龄：<input type="number" class="form-control" v-model='Age'>
</td>
</tr>
<tr>
<td>
爱好：
<input type="checkbox" v-model="Cheicked" value="吃" />吃
<input type="checkbox" v-model="Cheicked" value="喝" />喝
<input type="checkbox" v-model="Cheicked" value="拉" />拉
<input type="checkbox" v-model="Cheicked" value="玩" />玩
</td>
</tr>
<tr>
<td>
城市
<select v-model="City" name="">
<option class="form-control" value="驻马店">驻马店</option>
<option class="form-control" value="南阳">南阳</option>
<option class="form-control" value="郑州">郑州</option>
</select>
</td>
</tr>
<tr>
<td>
文本域：<textarea name="" class="form-control" v-model="Text" id="" cols="30" rows="10">Datas</textarea>
</td>
</tr>
<tr>
<td><button @click.submit.prevent="add()">添加</button></td>
</tr>
<tr>
<td><button>保存</button></td>
</tr>
</table>
</form>
</div>
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看