购物车练习
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<table class="table table-bordered table-hover">
<thead>
<tr class="text-center">
<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 fruit" class="text-center">
<td>{{index+1}}</td>
<td>{{value.name}}</td>
<td>{{value.price}}</td>
<td>
<button @click="adds(index)">+</button>
<span>{{value.num}}</span>
<button @click="redu(index)">-</button>
</td>
<td>{{value.num*value.price}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">总计:{{total}}</td>
</tr>
</tfoot>
</table>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '.container',
data:{
fruit:[
{name:'香蕉',price:1,num:1,subprice:0},
{name:'苹果',price:2,num:1,subprice:0},
{name:'鸭梨',price:3,num:1,subprice:0}
],
total:0
},
methods:{
adds:function(index){
this.fruit[index].num++,
this.fruit[index].subprice=(this.fruit[index].price*this.fruit[index].num).toFixed(2)
this.getTotal()
},
redu:function(index){
if(this.fruit[index].num>1){
this.fruit[index].num--,
this.fruit[index].subprice=(this.fruit[index].price*this.fruit[index].num).toFixed(2)
}
this.getTotal()
},
getTotal:function(){
var len=this.fruit.length
var sum= 0
for(var i=0;i<len;i++){
sum+=Number(this.fruit[i].subprice)
}
this.total=sum.toFixed(2);
}
}
})
</script>
</body>
</html>
选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
li{
list-style: none;
}
#app{
width:500px;
margin:100px auto;
}
.list{
overflow: hidden;
width:450px;
}
.list>li{
float: left;
width:150px;
text-align: center;
border:1px solid #000;
}
.cont>li{
width:450px;
height:150px;
line-height: 150px;
border:1px solid #000;
text-align: center;
}
</style>
</head>
<body>
<div id='app'>
<ul class='list'>
<li v-for="(value,index) in tab" @click="chg(index)">{{value.title}}</li>
</ul>
<ul class='cont'>
<li v-for="(value,index) in tab" v-show="value.flag">{{value.content}}</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
tab:[
{title:'选项卡1',content:'11111111111111',flag:true},
{title:'选项卡2',content:'22222222222222',flag:false},
{title:'选项卡3',content:'33333333333333',flag:false}
]
},
methods:{
chg:function(ind){
for(var i=0;i<this.tab.length;i++){
this.tab[i].flag=false;
}
this.tab[ind].flag=true;
}
}
})
</script>
</body>
</html>
计算机属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<h1>{{msg.split(' ').reverse().join('===')}}</h1>
<a href="#">{{revMsg}}</a>
<!--vue===hello hello vue-->
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hello vue'
},
methods:{},
filters:{},
computed:{
revMsg:function(){
return this.msg.split(' ').reverse().join('*');
}
}
})
</script>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性</title>
</head>
<body>
<div id='itany'>
<button @click='add'>加货</button>
<h1>总价为:{{total}}</h1>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:"#itany",
data:{
package1:{count:5,price:3},
package2:{count:8,price:4}
},
computed:{
total:function(){
return this.package1.count*this.package1.price+this.package2.count*this.package2.price
}
},
methods:{
add:function(){
this.package1.count++;
}
}
})
</script>
</body>
</html>
网友评论