使用指令完成用戶數據的增刪查功能
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<form action="" v-on:submit.prevent>
<table>
<tr>
<td><label for="username">用戶名：</label></td>
<td><input id="username" type="text" v-model="user.username"></td>
</tr>
<tr>
<td><label>性別：</label></td>
<td>
<input id="man" type="radio" v-model="user.sex" value="男"><label for="man">男</label>
<input id="woman" type="radio" v-model="user.sex" value="女"><label for="woman">女</label>
</td>
</tr>
<tr>
<td><label>愛好：</label></td>
<td>
<input type="checkbox" id="hobby1" v-model="user.hobbys" value="抽菸"><label for="hobby1">抽菸</label>
<input type="checkbox" id="hobby2" v-model="user.hobbys" value="喝酒"><label for="hobby2">喝酒</label>
<input type="checkbox" id="hobby3" v-model="user.hobbys" value="燙頭"><label for="hobby3">燙頭</label>
</td>
</tr>
<tr>
<td><label>城市：</label></td>
<td>
<select v-model="user.city">
<option value="" disabled>請選擇城市</option>
<option v-for="city in citys" v-bind:value="city.cityCode">{{city.cityName}}</option>
</select>
</td>
</tr>
<tr>
<td><label for="sign">簽名：</label></td>
<td>
<textarea id="sign" cols="30" rows="10" v-model="user.sign"></textarea>
</td>
</tr>
<tr>
<td><input type="submit" value="提交" v-on:click="subUser"></td>
</tr>
</table>
</form>
<div>臨時顯示用戶信息：{{user}}</div>
<div>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>用戶名</th>
<th>性別</th>
<th>愛好</th>
<th>城市</th>
<th>簽名</th>
<th>操作</th>
</tr>
<tr v-for="(user,index) in users">
<td>{{user.username}}</td>
<td>{{user.sex}}</td>
<td>
<template v-for="hobby in user.hobbys">{{hobby}} </template>
</td>
<td>{{user.city}}</td>
<td>{{user.sign}}</td>
<td><button v-on:click="delUser(index)">刪除</button></td>
</tr>
</table>
</div>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script>
var app = new Vue({
el:"#app",
data:{
user:{
username:"",
sex:"",
hobbys:[],
city:"",
sign:'',
},
users:[],
citys:[
{cityName:"北京",cityCode:'beijing'},
{cityName:"天津",cityCode:'tianjin'},
{cityName:"重慶",cityCode:'chongqing'},
{cityName:"上海",cityCode:'shanghai'}
]
},
methods:{
subUser:function () {
/**
* 數據爲空驗證(用戶名、性別、愛好、城市、簽名)
*/
if(this.user.username==""){
alert("請輸入用戶名");
return false;
}
this.users.push(this.user);
this.user = {
username:"",
sex:"",
hobbys:[],
city:"",
sign:""
}
},
delUser:function (index) {
this.users.splice(index,1);
}
}
})
</script>
</body>
</html>
最終實現結果
QQ：732005030
掃碼加微信
