一、模拟购物车
如下图所示，结合bootstrap(bootstrap中文网地址:http://www.bootcss.com/）框架用现在所学的指令完成
要求：点击加或减按钮时数量、加减、总计也随之加减
模拟购物车.png
代码如下：
方法一：
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/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 arr">
<td>{{index+1}}</td>
<td>{{value.name}}</td>
<td>{{value.price}}</td>
<td>
<button v-on:click="jian(index)"></button>
{{value.num}}
<button v-on:click="add(index)"></button>
</td>
<td>{{value.price*value.num}}</td>
</tr>
<tr>
<td colspan="5">总计：{{sum}}</td>// colspan="5":合并单元格=“合并5列”
</tr>
</tbody>
</table>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
new Vue({
el:".container",
data:{
arr:[
{name:"香蕉",price:1,num:0}
{name:"苹果",price:2,num:0}
{name:"鸭梨",price:3,num:0}
],
sum:0
},
methods:{
jian:function(ind){
if(this.arr[ind].num=0){
this.num=0
}else{
//num数量减
this.arr[ind].num--
//总计
this.sum-=this.arr[ind].price
}
} ,
add:function(ind){
//num数量减
this.arr[ind].num++
//总计
this.sum+=this.arr[ind].price
}
}
})
</script>
方法二：
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/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='../js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'.container',
data:{
list:[
{pname:'香蕉',price:1,count:2,sub:2},
{pname:'苹果',price:2,count:3,sub:6},
{pname:'鸭梨',price:3,count:4,sub:12}
],
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
二、模拟用户录入
结合bootstrap(bootstrap中文网地址:http://www.bootcss.com/）框架完成
要求：点击添加按钮可以把输入框中的内容添加到table中，点击重置按钮可把当前出入框中的内容清空，点击每行的删除也可以当前行删除掉
模拟用户录入
代码如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<div class="container">
<form action="">
<div class='form-group'>
<label for="exampleInputEmail1">姓名</label>
<input type="text" class="form-control" placeholder="请输入您的姓名" v-model="arrs.name">
</div>
<div class='form-group'>
<label for="exampleInputEmail1">年龄</label>
<input type="text" class="form-control" placeholder="请输入您的年龄" v-model="arrs.old">
</div>
<div class='form-group'>
<label for="exampleInputEmail1">邮箱</label>
<input type="text" class="form-control" placeholder="请输入您的邮箱" v-model="arrs.mail">
</div>
<div class='form-group text-center'>
<input type="text" class='btn btn-success' value='添加' v-on:click="add">
<input type="text" class='btn btn-info' value='重置' v-on:click="chong">
</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 arr">
<td>{{index+1}}</td>
<td>{{value.name}}</td>
<td>{{value.old}}</td>
<td>{{value.mail}}</td>
<td><button v-on:click="clear">删除</button></td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'.container',
data:{
arr:[
{name:'Tom',old:'18',mail:'Tom@126.com'},
{name:'Kimi',old:'18',mail:'Kimi@126.com'},
{name:'Mark',old:'18',mail:'Mark@126.com'}
],
arrs: {}
},
methods:{
add:function(){
//方法一
/*this.arr.push(this.arrs)
this.arrs={}*/
//浅克隆 方法二
var newarrs={}
for(var i in this.arrs){
newarrs[i]=this.arrs[i]
}
this.arr.push(newarrs)
this.arrs={}
},
chong:function(){
this.arrs={}
},
clear:function(index){
this.arr.splice(index,1)
}
}
})
</script>
三、选项卡
要求：运用v-show显示或隐藏来完成
Image 4.png
代码如下：
<style>
li{
list-style: none;
}
.name{
display: inline-block;
border: 2px solid saddlebrown;
width: 100px;
line-height: 25px;
text-align: center;
}
.names{
border: 2px solid saddlebrown;
width: 308px;
margin-top: -16px;
margin-left: 40px;
text-align: center;
line-height: 60px;
}
</style>
<div id="itany">
<ul>
<li class="name" v-for="(value,index) in arr" @click="fun(index)">{{value.text}}</li>
</ul>
<p class="names clearfix" v-for="(value,index) in arr" v-show="value.see">{{value.title}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
arr:[
{text:'选项一',title:'我是选项一',see:true},
{text:'选项二',title:'我是选项二',see:false},
{text:'选项三',title:'我是选项三',see:false}
]
},
methods:{
fun:function(ind){
for(var i= 0;i<this.arr.length;i++){
this.arr[i].see=false
}
this.arr[ind].see=true
}
}
})
</script>
网友评论