Vueはカートの基本機能を実現します。
Vueはカートの商品プラス、マイナス、単一選択、全選択、削除、価格更新などの機能を実現します。
DomeとVueコード
vue.jsコンポーネントの教程については、テーマvue.jsコンポーネント学習教程をクリックして学習してください。
もっと多いvue学習教程はテーマ『vue実戦教程』を読んでください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
DomeとVueコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<link rel="stylesheet" href="./css/common.css" >
<link rel="stylesheet" href="./css/cart.css" >
</head>
<body>
<div id="main">
<div class="container">
<div id="cart">
<h1> </h1>
<form action="#" method="post">
<table class="form">
<thead>
<tr>
<th width="8%"> </th>
<th width="50%"> </th>
<th width="13%"> （ ）</th>
<th width="15%"> </th>
<th width="14%"> （ ）</th>
</tr>
</thead>
<tbody id="cart-goods-list">
<tr v-for="cart in productList">
<td>
<input type="checkbox" name="good-id" :value="1" v-model="cart.select">
</td>
<td class="goods">
<div class="goods-image">
<img v-bind:src="cart.pro_img">
</div>
<div class="goods-information">
<h3>{{cart.pro_name}}</h3>
<ul>
<li>{{cart.pro_purity}}</li>
<li>{{cart.pro_service}}</li>
</ul>
</div>
</td>
<td>
<span class="price">￥<em class="price-em">{{cart.pro_price.toFixed(2)}}</em></span>
</td>
<td>
<div class="combo">
<input type="button" name="minus" value="-" class="combo-minus" @click="cart.pro_num<2?cart.pro_num=1:cart.pro_num--">
<input type="text" name="count" v-model.number="cart.pro_num" class="combo-value">
<input type="button" name="plus" value="+" class="combo-plus" v-on:click="cart.pro_num++">
</div>
</td>
<td>
<strong class="amount">￥<em class="amount-em">{{(cart.pro_price*cart.pro_num).toFixed(2)}}</em></strong>
</td>
</tr>
</tbody>
<tfoot v-show="productList.length!=0">
<tr>
<td colspan="2">
<label>
<input type="checkbox" name="all" v-model="isSelectAll">
<span @click=""> </span>
</label>
<a href="#" rel="external nofollow" id="cart-delete" @click="del()"> </a>
</td>
<td colspan="3">
<span> ：</span>
<strong id="total-amount">￥<em id="total-amount-em">{{getTotal}}</em></strong>
<input type="submit" value=" " id="settlement">
</td>
</tr>
</tfoot>
</table>
</form>
<div v-show="productList.length===0">
~ ~
</div>
</div>
</div>
</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el:"#cart",
data:{
productList:[
{
'pro_name': 'Dior ',//
'pro_purity': '50ml',//
'pro_service': " 7 ",//
'pro_num': 1,//
'pro_img': 'img/1.jpg',//
'pro_price': 498,// ,
'select': true ,//
},
{
'pro_name': ' （dior） CD ',//
'pro_purity': '350g',//
'pro_service': " 7 ",//
'pro_num': 1,//
'pro_img': 'img/2.jpg',//
'pro_price': 268,//
'select': true //
},
{
'pro_name': 'LANCÔME ',//
'pro_purity': '50ml',//
'pro_service': " 7 ",//
'pro_num': 1,//
'pro_img': 'img/3.jpg',//
'pro_price': 598,//
'select': true //
}
]
},
computed:{
getTotal:function(){
var newArr=this.productList.filter(function(val){
return val.select===true;
})
var price=0;
for(var i=0;i<newArr.length;i++){
price+=newArr[i].pro_num*newArr[i].pro_price
}
return price.toFixed(2)
},
isSelectAll:{
get:function(){
return this.productList.every(function(val){
return val.select===true;
})
},
set:function(newValue){
for(var i=0;i<this.productList.length;i++){
this.productList[i].select=newValue;
}
}
}
},
methods:{
del:function(){
if(confirm(" ")){
var newArr=[];
for(var i=0;i<this.productList.length;i++){
if(this.productList[i].select===false){
newArr.push(this.productList[i])
}
}
this.productList=newArr;
}
}
}
})
</script>
</html>
@charset "utf-8";
#main{
padding: 30px 0px;
}
#cart{
background: #FFFFFF;
padding: 40px;
}
#cart h1{
line-height: 40px;
padding: 0px 0px 10px 0px;
}
table.form{
border-collapse: collapse;
empty-cells: show;
margin: 20px 0px;
padding: 0px;
table-layout: fixed;
width: 100%;
}
table.form th,
table.form td{
border-bottom: 1px solid #DDDDDD;
padding: 15px 10px;
text-align: left;
}
table.form{
border-top: 3px solid #DDDDDD;
}
.goods .goods-image img{
border: 1px solid #DDDDDD;
float: left;
height: 100px;
margin: 0px 20px 0px 0px;
}
.goods .goods-information{
float: left;
}
.goods .goods-information ul{
color: #666666;
font-size: 12px;
line-height: 20px;
margin:10px 0px 0px 0px;
}
.price,
.amount,
#total-amount{
color: #E00000;
}
#total-amount{
font-size: 22px;
}
.price em,
.amount em,
#total-amount em{
font-style: normal;
}
.combo .combo-minus,
.combo .combo-value,
.combo .combo-plus{
background: #FFFFFF;
border: 1px solid #DDDDDD;
color: #333333;
float: left;
font-weight: bold;
margin: 0px;
outline: none;
text-align: center;
}
.combo .combo-minus,
.combo .combo-plus{
font-size: 16px;
height: 26px;
line-height: 26px;
padding: 0px;
width: 24px;
}
.combo .combo-value{
border-left: none;
border-right: none;
height: 20px;
line-height: 20px;
padding: 2px;
width: 40px;
}
#cart-delete{
margin-left: 20px;
}
#settlement{
background: #E00000;
border: none;
color: #FFFFFF;
float: right;
font-size: 16px;
height: 40px;
line-height: 40px;
margin: 0px;
outline: none;
padding: 0px;
width: 160px;
}vue.jsコンポーネントの教程については、テーマvue.jsコンポーネント学習教程をクリックして学習してください。
もっと多いvue学習教程はテーマ『vue実戦教程』を読んでください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。