2018-09-12 vue第二课（v-model（双向数据绑定
2018-09-13 本文已影响0人
LYH2312
1.v-model（双向数据绑定）=>主要用于表单元素
<div id="id">
百度<input v-model="msg"></input>
<P>小度{{msg}}</P>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#id',
data:{
msg:''//双向数据绑定，可为空值
}
})
</script>
2.v-on绑定事件
v-on:事件=“函数名”
methods:{//存放函数（是一个方法）}
<div id='itany'>
<button v-on:click='alt'>点击</button>
<p>{{msg}}</p>
</div>
<script src="vue.js"></script>
<script>
var vm=new Vue({
el:'#itany',
data:{
msg:'hello vue'，
mas:'HELLO WORD'
},
methods:{//存放函数(方法)
alt:function(){
// console.log(this.msg)
console.log(vm.msg)//打印
this.msg=this.mas
}
}
})
</script>
3.添加和删除
push（）给数组末尾添加新元素；
pop（）始终删除数组最后一个元素；
unshift（）给数组开头添加一个元素；
shift（）始终删除数组开头的元素；
splice（）从数组中删除元素；
splice（index，n）=>（下标，个数）
<div id="new">
<input v-model="a">
<button v-on:click="fun">添加</button>
<ul>
<Li v-for="(val,index) in arr">{{val}}<button v-on:click="fun1(index)">删除</button></Li>
</ul>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#new",
data:{
arr:["啥","玩","意"],
a:""
},
methods:{
fun:function(){
this.arr.push(this.a)
},
fun1:function(ind){
this.arr.splice(ind,1)
}
}
})
</script>
4.添加删除用户
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.form-group{
margin: 0 auto;
margin-top: 20px;
text-align: center;
}
.form-group input {
width: 800px;
height: 50px;
}
.btn-success{
margin-top: 20px;
margin-left:400px ;
width: 100px;
height: 60px;
border-radius:5px ;
}
.btn-new{
margin-top: 20px;
margin-left:400px ;
width: 100px;
height: 60px;
border-radius:5px ;
}
.table-bordered{
margin-left: 600px;
text-align: center;
}
.border{
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<script src="vue.js"></script>
<div id="app">
<div class="form-group">
<label for="group">姓名</label>
<input type="text" placeholder="你的姓名" v-model="person1.name">
</div>
<div class="form-group">
<label for="author">年龄</label>
<input type="text" placeholder="你的年龄" v-model="person1.num">
</div>
<div class="form-group">
<label for="price">邮箱</label>
<input type="text" placeholder="你的邮箱" v-model="person1.score">
</div>
<button class="btn btn-success" v-on:click="addPerson()">添加</button>
<button class="btn btn-new" ><a href="">重置</a></button>
<table class="table table-bordered" border="1">
<thead class="border">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(person,index) in people">
<td>{{index+1}}</td>
<td>{{person.name}}</td>
<td>{{person.num}}</td>
<td>{{person.score}}</td>
<td><buton class="btn btn-warning" @click="delPerson(person)">删除</buton></td>
</tr>
</tbody>
</table>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
person1:{
name: '',
num: '',
score: ''
},
people:[{
name: '张三',
num: '12',
score: 'tom@126.com'
},
{
name: '李四',
num: '15',
score: 'tom@126.com7'
},
{
name: '王二',
num: '18',
score: 'tom@126.com'
},
]
},
//在methods中定义方法
methods:{
//新增成员信息
addPerson: function () {
this.person1.id=this.people.length+1;
this.people.push(this.person1);
this.person1={};
},
//删除成员信息
delPerson: function(person){
this.people.splice(this.people.indexOf(person),1);
}
}
})
</script>
</body>
</html>
