vue指令应用
2018-09-16 本文已影响0人
婲魢銣佌亾荷姒堪
应用1: 购物车
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<script src='js/vue.js'></script>
</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 type="text/javascript">
new Vue({
el:'.container',
data:{
list:[
{pname:'苹果',price:3,count:2,sub:6},
{pname:'梨',price:4,count:3,sub:12},
{pname:'香蕉',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,total=0;i<this.list.length;i++){
total+=this.list[i].sub
}
this.sum=total
}
}
})
</script>
</body>
</html>
应用2: 选项卡
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='js/vue.js'></script>
</head>
<body>
<div id='itany'>
<ul>
<li v-for='(value,index) in card' @click='chg(index)'>{{value.title}}</li>
</ul>
<ul>
<li v-for='(value,index) in card' v-show='value.flag'>{{value.content}}</li>
</ul>
</div>
<script>
new Vue({
el:"#itany",
data:{
card:[
{title:'选项卡1',content:'11111111111111111',flag:true},
{title:'选项卡2',content:'22222222222222222',flag:false},
{title:'选项卡3',content:'33333333333333333',flag:false}
]
},
methods:{
chg:function(ind){
for(var i=0;i<this.card.length;i++){
this.card[i].flag=false;
}
this.card[ind].flag=true;
}
}
})
</script>
</body>
</html>
应用3: 用户管理
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src='js/vue.js'></script>
</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'>
<!-- success 绿色 info 蓝色 danger 红色 warning 黄色 primary 蓝色 -->
<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>
new Vue({
el:'.container',
data:{
user:[
{uname:'jack',pass:'123456',email:'123@126.com'},
{uname:'rose',pass:'789456',email:'456@126.com'},
{uname:'tom',pass:'456321',email:'789@126.com'}
],
student:{}
},
methods:{
add:function(){
this.user.push(this.student);
this.student={}
},
delt:function(ind){
this.user.splice(ind,1)
}
}
})
</script>
</body>
</html>
