購(gòu)物車
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<table class="table table-bordered text-center">
<thead>
<tr>
<th class="text-center">編號(hào)</th>
<th class="text-center">名稱</th>
<th class="text-center">單價(jià)</th>
<th class="text-center">數(shù)量</th>
<th class="text-center">小計(jì)</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in arr">
<td>{{index+1}}</td>
<td>{{value.name}}</td>
<td>{{value.price}}</td>
<td>
<button @click="add(index)">+</button>
<span>{{value.num}}</span>
<button @click="jian(index)">-</button>
</td>
<td>{{value.sub}}</td>
</tr>
<tr >
<td colspan="5" text-center>總價(jià):{{sum}}</td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".container",
data:{
arr:[
{name:"香蕉",price:2,num:3,sub:6},
{name:"香蕉",price:2,num:3,sub:6},
{name:"香蕉",price:2,num:3,sub:6}
],
sum:18
},
methods:{
add:function(i){
this.arr[i].num++;
this.arr[i].sub=this.arr[i].price*this.arr[i].num;
this.a();
},
jian:function(i){
if(this.arr[i].num>1){
this.arr[i].num--;
this.arr[i].sub=this.arr[i].price*this.arr[i].num;
}
this.a();
},
a:function(){
for(var i=0,p=0;i<this.arr.length;i++){
p+=this.arr[i].sub
}
this.sum=p
}
}
})
</script>
</body>
</html>
1.png
用戶管理頁(yè)面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<label>名字</label>
<input placeholder="請(qǐng)輸入名字" class="form-control" v-model="arrs.name">
</div>
<div class="form-group">
<label>年齡</label>
<input placeholder="請(qǐng)輸入年齡" class="form-control" v-model="arrs.age">
</div>
<div class="form-group">
<label>郵箱</label>
<input placeholder="請(qǐng)輸入郵箱" class="form-control" v-model="arrs.email">
</div>
<div class="form-group text-center">
<input type="button" value="添加" class="btn btn-success" @click="add">
<input type="button" value="重置" class="btn btn-info">
</div>
</form>
<table class="table table-bordered text-center">
<thead>
<tr>
<th class="text-center">編號(hào)</th>
<th class="text-center">姓名</th>
<th class="text-center">年齡</th>
<th class="text-center">郵箱</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in arr">
<td>{{index+1}}</td>
<td>{{value.name}}</td>
<td>{{value.age}}</td>
<td>{{value.email}}</td>
<td>
<button @click="splice(index)">刪除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".container",
data:{
arr:[
{name:"jack",age:18,email:"123@126.com"},
{name:"jack",age:18,email:"123@126.com"},
{name:"jack",age:18,email:"123@126.com"}
],
arrs:{name:"",age:"",email:""}
},
methods:{
add:function(){
this.arr.push(this.arrs),
this.arrs={}
},
splice:function(index){
this.arr.splice(index,1)
}
}
})
</script>
</body>
</html>
2.png
選項(xiàng)卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value,index) in card" @click="p(index)">{{value.title}}</li>
</ul>
<ul>
<li v-for="(value,index) in card" v-show="value.flag">{{value.content}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data: {
card: [
{title: "選項(xiàng)卡1", content: "xuanxiangka",flag:true},
{title: "選項(xiàng)卡2", content: "xuanxiangka2",flag:false},
{title: "選項(xiàng)卡3", content: "xuanxiangka3",flag:false}
]
},
methods:{
p:function(ind){
for(var i=0;i<this.card.length;i++){
this.card[i].flag=false;
}
this.card[ind].flag=true;
}
}
})
</script>
</body>
</html>
