Vue-03：
2018-09-21 本文已影响0人
OrangeQjt
首先，我们来复习一下前天学过的：内置指令；利用v-for，v-model，v-on来做的添加列表；以及图片来回切换效果。
1.>v-for:循环指令，主要用于列表渲染，可以遍历数组和对象；
2.>v-model:对表单元素进行双向数据绑定；
3.>v-on:绑定事件监听器，表达式：v-on:事件名='函数名'；
4.>v-bind:主要用于动态绑定Dom元素属性，表达式：v-bind：属性名=‘值’；
5.>v-show:控制元素显示与隐藏;
6.>v-if:控制元素显示与隐藏;
7.>v-else/v-else-if:不需要表达式，v-else必须有v-if或v-else-if；
接下来，列举几个老师给我们讲的几个实用实例：
1.>选项卡：
（第一种方法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.app,li{
border: 1px solid #000;
list-style: none;
float: left;
}
</style>
</head>
<body>
<div class="app">
<div v-for='(value,index) in arr' v-show="ars[index]">{{value}}</div>
<ul>
<li v-for="(value,index) in arr" @click="qjt(index)">{{index+1}}</li>
</ul>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'.app',
data:{
arr:['QJT','QJQ','QJJ'],
ars:[true,true,true]
},
methods:{
qjt:function(ind){
this.ars=[!true,!true,!true]
this.ars[ind]=true
}
}
})
</script>
</body>
</html>
效果图：
Document2.png
（第二种方法）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li{
list-style: none;
float: left;
border: 15px solid #000；
}
</style>
</head>
<body>
<div id="itany">
<ul>
<li v-for='value,index' in xxk @click='chg(index)'>{{value,title}}</li>
</ul>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
xxk:[{title:'SKY',content:'蓝色天空',flag:true},
{title:'WHITE',content:'白色',flag:false},
{title:'black',content:'黑色',flag:false}
]
},
methods:{
chg:function(ind){
for(var i=0;i<this.xxk.length;i++){
this.xxk[i].flag=false;
this.xxk[ind].flag=true;
}
}
}
})
</script>
</body>
</html>
2.>购物车：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../bootstrap.css">
</head>
<body>
<div class='container'>
<table class='table table-bordered text-center'>
<thead>
<tr>
<th>编号</th>
<th>品名</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in list">
<td>{{index+1}}</td>
<td>{{value.pname}}</td>
<td>{{value.price}}</td>
<td>
<button @click='add(index)'>+</button>
<span>{{value.count}}</span>
<button @click='redu(index)'>-</button>
</td>
<td>{{value.sub}}</td>
</tr>
<tr>
<td colspan="5">总价：￥{{sum}}</td>
</tr>
</tbody>
</table>
</div>
<script src='../vue.js'></script>
<script type="text/javascript">
new Vue({
el:'.container',
data:{
list:[
{pname:'apple',price:3,count:2,sub:6},
{pname:'pear',price:4,count:3,sub:12},
{pname:'banana',price:5,count:4,sub:20}
],
sum:0
},
methods:{
add:function(ind){
//数量
this.list[ind].count++;
//改变小计
this.list[ind].sub=this.list[ind].count*this.list[ind].price;
this.total();
},
redu:function(ind){
//数量
if(this.list[ind].count>1){
this.list[ind].count--;
}
//小计
this.list[ind].sub=this.list[ind].count*this.list[ind].price;
this.total();
},
total:function(){
for(var i=0,tota=0;i<this.list.length;i++){
tota+=this.list[i].sub
}
this.sum=tota
}
}
})
</script>
</body>
</html>
Document3.png
3.>用户管理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../bootstrap.css">
</head>
<body>
<div class="container">
<form action="">
<div class="form-group">
<label for="">用户名</label>
<input type="text" class='form-control' placeholder="请输入用户名" v-model='student.uname'>
</div>
<div class="form-group">
<label for="">密码</label>
<input type="text" class='form-control' placeholder="请输入密码" v-model='student.pass'>
</div>
<div class="form-group">
<label for="">邮箱</label>
<input type="text" class='form-control' placeholder="请输入邮箱" v-model='student.email'>
</div>
<div class="form-group text-center">
<input type="text" class='btn btn-success' value="添加" @click='add'>
<input type="text" class="btn btn-info" value="重置">
</div>
</form>
<table class="table table-bordered">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>密码</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in user">
<td>{{index+1}}</td>
<td>{{value.uname}}</td>
<td>{{value.pass}}</td>
<td>{{value.email}}</td>
<td><button @click='delt(index)'>删除</button></td>
</tr>
</tbody>
</table>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'.container',
data:{
user:[
{ uname:'jack',pass:'123456',email:'123@126.com'
},
{ uname:'rose',pass:'123456',email:'123@126.com'
},
{ uname:'taitan',pass:'123456',email:'123@126.com'
}
],
student:{}
},
methods:{
add:function(){
this.user.push(this.student);
this.student={}
},
delt:function(ind){
this.user.splice(ind,1)
}
}
})
</script>
</body>
</html>
效果图：
Document.png
