<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body >
<div id="app">
<div>
姓名:<input type="text" v-model="username"><br>
姓别:<input type="text" v-model="usersex"><br>
<button v-on:click="add">点击就会添加一条数据</button>
</div>
<table>
<thead>
<tr>
<td></td>
<td>姓名</td>
<td>姓别</td>
</tr>
</thead>
<tbody>
<tr v-for="user in users" >
<td><input type="checkbox"></td>
<td>{{user.name}}</td>
<td>{{user.sex}}
<td>
<button v-on:click="del">删除</button>
</td>
</td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el: '#app',
data: {
username:'',
usersex:'',
users:[
{
name:'小黑',
age:'18',
sex:'男'
},
{
name:'李白',
sex:'男',
},
{
name:'渣渣辉',
sex:'男'
},
{
name:'yyqx',
sex:'男'
}
]},
methods:{
add(){
user={
name:this.username,
sex:this.usersex
}
this.users.push(user);
},
del:function(index){
this.users.splice(index,1);
}
}
});
</script>
</body>
</html>
2、vue的v-for语法可以遍历那些值,分别写出遍历不同值的代码
1、迭代数字
<p v-for="i in 10">这是第 {{i}} 个P标签</p>
2、迭代data中的普通对象
<div v-for="(val, key, i) in cat">{{val}} --- {{key}} --- {{i}}</div>
3、迭代data中的数组
<ul>
<li v-for="(item, i) in list">索引:{{i}} 姓名:{{item.name}} 年龄:{{item.age}}</li>
</ul>
3、文字叙述v-model和v-bind的差别
1:v-bind动态绑定指令,默认情况下标签自带属性的值是固定的,在为了能够动态的给这些属性添加值,可以使用v-bind:你要动态变化的值=“表达式”
2:v-bind用于绑定属性和数据 ,其缩写为“ : ” 也就是v-bind:id === :id
3:v-model用在表单控件上的,用于实现双向数据绑定,所以如果你用在除了表单控件以外的标签是没有任何效果的。