<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vue学习 语法demo1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/javascript" src="jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="app">
<table>
<tr>
<th>序号</th>
<th>名字</th>
<th>年龄</th>
<th>性别</th>
<th>爱好</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in users">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>
<ol><li v-for="hobby in item.hobbys">{{hobby}}</li></ol>
</td>
<td><a href="#" @click="edit(index)">编辑</a></td>
<td><a href="#" @click="remove(index)">删除</a></td>
</tr>
<tr>
<td><input type="" v-model="id" ></td>
<td><input type="" v-model="name" ></td>
<td><input type="" v-model="age" ></td>
<td><input type="radio" v-model="sex" value="男">男 <input type="radio" v-model="sex" value="女">女 </td>
<td>
<input type="checkbox" v-model="hobbys" value="上网" >上网
<input type="checkbox" v-model="hobbys" value="游戏" >游戏
<input type="checkbox" v-model="hobbys" value="唱歌" >唱歌
<input type="checkbox" v-model="hobbys" value="看书" >看书
<input type="checkbox" v-model="hobbys" value="游泳" >游泳
<input type="checkbox" v-model="hobbys" value="抽烟" >抽烟
<input type="checkbox" v-model="hobbys" value="喝酒" >喝酒
</td>
<td>
<a href="#" @click="add()" v-if="is_add">添加</a>
<a href="#" @click="save()" v-if="is_edit">编辑</a>
</td>
</tr>
</table>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
users:[
{id:1,name:"张明",age:21,sex:"男",hobbys:[
'上网'
]},
{id:2,name:"金敏",age:21,sex:"女",hobbys:[
'游戏'
]},
{id:3,name:"赵燕",age:20,sex:"女",hobbys:[
'看书'
]},
{id:4,name:"郑阳",age:25,sex:"男",hobbys:[
'抽烟',
'喝酒'
]}
],
id:"",
name:"",
age:"",
sex:"男",
hobbys:[],
is_add:true,
is_edit:false
},
filter:{
},
watch:{
},
methods: {
edit: function (index) {
console.log(index);
var user = this.users[index];
this.id=user.id;
this.name=user.name;
this.age=user.age;
this.sex=user.sex;
this.hobbys=user.hobbys;
this.is_edit=true;
this.is_add=false;
},
add: function()
{
this.users.push({id:this.id,name:this.name,age:this.age,sex:this.sex,hobbys:this.hobbys});
this.id="";
this.name="";
this.sex="";
this.age="";
this.sex="男";
this.hobbys=[];
},
save:function(){
var that = this;
$.each(this.users,function(i,item){
if(item.id==that.id){
item.name=that.name;
item.age=that.age;
item.sex=that.sex;
item.hobbys=that.hobbys;
}
});
this.id="";
this.name="";
this.sex="";
this.age="";
this.sex="";
this.hobbys=[];
this.is_add=true;
},
remove:function(index){
this.users.splice(index, 1);
}
}
});
</script>
</body>
</html>