购物车
<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">编号</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.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>总价:{{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
用户管理页面
<!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="请输入名字" class="form-control" v-model="arrs.name">
</div>
<div class="form-group">
<label>年龄</label>
<input placeholder="请输入年龄" class="form-control" v-model="arrs.age">
</div>
<div class="form-group">
<label>邮箱</label>
<input placeholder="请输入邮箱" 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">编号</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
选项卡
<!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: "选项卡1", content: "xuanxiangka",flag:true},
{title: "选项卡2", content: "xuanxiangka2",flag:false},
{title: "选项卡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>
