<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--v-for-->
<!--v-model 双向数据绑定 一般对表格类单位使用-->
<div id="jie">
<input type="text" v-model="msg">
<p>{{msg}}</p>
</div>
<script>
new Vue({
el:'#jie',
data:{
msg:'adw'
}
})
</script>
</body>
</html>
v-model 双向数据绑定 一般对表格类单位使用 输出结果如下图 表格中数据与下方数据绑定 是一样的
QQ截图20180912163309.png
QQ截图20180912163319.png
QQ截图20180912163328.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="jie">
<p>{{msg}}</p>
<button v-on:click="alt">点击</button>
</div>
<script>
new Vue({
el:'#jie',
data:{
msg:'hello word'
},
methods:{//存放函数(方法)
alt:function(){
this.msg='hello 瓦罗兰大陆'
}
}
})
</script>
</body>
</html>
methods 存放函数
v-on 事件绑定 上图是点击事件 输出结果为下
QQ截图20180912170506.png
本是hello word 点击按钮后
QQ截图20180912170628.png
如上图所示变成hello 瓦罗兰大陆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="jie">
<input type="text" v-model="a">
<button v-on:click="alt">添加按钮</button>
<ul>
<li v-for="(value,index) in arr">{{value}} <button v-on:click="sc(index)">删除</button></li>
</ul>
</div>
<script>
new Vue({
el:'#jie',
data:{
arr:['吃饭','睡觉','打豆豆'],
a:''
},
methods:{
alt:function(){
this.arr.push(this.a),
this.a=''
},
sc: function (ind) {
this.arr.splice(ind,1)
}
}
})
</script>
</body>
</html>
注:
- 原生js中向数组中添加元素要用push,在vue中同样要用push
2.vue实例中的方法要访问对象实例中的数据要用this
3.删除时要注意
输出结果如下图
QQ截图20180912171524.png
QQ截图20180912171551.png
QQ截图20180912171642.png
QQ截图20180912171650.png
作业1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
header{
width: 1000px;
margin: 0 auto;
}
input{
width: 1000px;
height: 30px;
}
button{
width: 70px;
height: 30px;
}
.tj{
margin-top: 20px;
margin-left: 400px;
margin-right: 50px;
background-color:mediumturquoise;
}
.cz{
margin-top: 20px;
background-color: navajowhite;
}
table{
width: 1000px;
margin: 50px auto;
text-align: center;
}
</style>
</head>
<body>
<div id="jie">
<header>
<h3>姓名</h3>
<input type="text" v-model="arr1.name" placeholder="请输入您的姓名">
<h3>年龄</h3>
<input type="text" v-model="arr1.year" placeholder="请输入您的年龄">
<h3>邮箱</h3>
<input type="text" v-model="arr1.tel" placeholder="请输入您的邮箱">
<button class="tj" v-on:click="sub">提交</button>
<button class="cz" >重置</button>
</header>
<table border=1 cellspacing="0">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
<th>操作</th>
</tr>
<tr v-for="(value,index) in arrs">
<td>{{index+1}}</td>
<td>{{value.name}}</td>
<td>{{value.year}}</td>
<td>{{value.tel}}</td>
<td><button v-on:click="dele(index)">删除</button></td>
</tr>
</table>
</div>
<script>
new Vue({
el:'#jie',
data: {
arr1:{
name:'',
year:'',
tel:'',
},
arrs: [
{name: 'Tom', year: '18', tel: 'Tom@126.com'},
{name: 'Jack', year: '19', tel: 'Jack@126.com'},
{name: 'Amy', year: '20', tel: 'Amy@126.com'}
]
},
methods:{
sub:function(){
this.arrs.push(this.arr1),
this.arr1={}
},
dele:function(ind){
this.arrs.splice(ind,1)
}
}
})
</script>
</body>
</html>
输出结果如下
QQ截图20180912172054.png
作业 2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
table{
width: 1000px;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="jie1">
<table border="1" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in arrs">
<td>{{index+1}}</td>
<td>{{value.name}}</td>
<td>{{value.price}}</td>
<td>
<button v-on:click="dele(index)">-</button>
{{value.num}}
<button v-on:click="add(index)">+</button>
</td>
<td>{{value.price*value.num}}</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>总计{{arr1}}</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el:'#jie1',
data:{
arrs:[
{name:'香蕉',price:1,num:0},
{name:'苹果',price:2,num:0},
{name:'鸭梨',price:3,num:0}
],
arr1:0
},
methods:{
dele:function(ind){
if(this.arrs[ind].num>=1){
this.arrs[ind].num-=1,
this.arr1-=this.arrs[ind].price
}
},
add:function(i){
this.arrs[i].num+=1,
this.arr1+=this.arrs[i].price
}
}
})
</script>
</body>
</html>
输出如下图
QQ截图20180914101959.png
任何都系都要注意细节
