Vue.js(一到五總結)-小Demo-購物車
阿新 • • 發佈：2019-01-04
如果看完了Vue.js入門1-5,就可以很容易的理解這個小Demo,這個Demo我們來模擬一個購物車。
1.首先,我們寫一個Demo需要把準備工作做好
1.1建立三個檔案
index.html(引入資源以及模板)
index.js(Vue例項以及業務程式碼)
style.css(css樣式)
如下圖:
1.2在index.html中引入vue.js的相關資源和js,這裡我就不上圖片了,直接把程式碼粘過來
<html>
<head>
<title>購物車小Demo</title>
<meta 這裡需要注意的是要將引入的js和vue寫在<body>的最底部,如果寫在<head>裡面,vue的例項就無法建立了!!!
這樣準備工作就做好了,接下來就該例項化vue了。2.初始化Vue例項
2.1在index.js中編寫程式碼:
var app = new Vue({
el:'#app',
data:{
},
computed:{
},
methods:{
}
})3.新增商品
3.1在index.js中的data方法中新增商品
list:[
{
id:1,
name:'iPhone10',
price:'6666',
count:1
},
{
id:2,
name:'oppo',
price:'4444',
count:1
},
{
id:3,
name:'筆記本',
price:'88888',
count:1
},
{
id:4,
name:'充電器',
price:'88',
count:1
},
{
id:5,
name:'手機殼',
price:'18',
count:1
},
]4.在index.html中完成表格的大體框架
<div id="app" v-cloak>
<template v-if="list.length">
<table>
<thead>
<tr>
<th></th>
<th>商品名稱</th>
<th>商品單價</th>
<th>購買數量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div>總價: ¥ {{totalPrice}} 元</div>
</template>
<div v-else>購物車為空</div>
</div>5.因為價錢在千分位都需要”,”隔開,所以我們在index.js的computed選項內寫入;
computed:{
totalPrice:function(){
var total = 0;
for (var i = 0; i < this.list.length; i++) {
var item = this.list[i];
total += item.price * item.count;
}
return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
}
},6.在index.html的中展示資料
<tbody>
<tr v-for="(item,index) in list">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="handleReduce(index)":disabled="item.count===1">-</button>
{{item.count}}
<button @click="handleAdd(index)">+</button>
</td>
<td>
<button @click="handleRemove(index)">移除</button>
</td>
</tr>
</tbody>
/*
其中handleReduce是減少的方法,handleAdd是增加的方法,handleRemove是移除的方法
*/7.在index.js中完成這三個方法
methods:{
handleReduce:function(index){
if (this.list[index].count === 1) {
return;
}
this.list[index].count--;
},
handleAdd:function(index){
this.list[index].count++;
},
handleRemove:function(index){
this.list.splice(index,1);
}
}8.這樣就完成了這個demo,是不是很簡單,對了還有css沒給大家.
index.hteml完整程式碼:
<html>
<head>
<title>購物車小Demo</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app" v-cloak>
<template v-if="list.length">
<table>
<thead>
<tr>
<th></th>
<th>商品名稱</th>
<th>商品單價</th>
<th>購買數量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="handleReduce(index)":disabled="item.count===1">-</button>
{{item.count}}
<button @click="handleAdd(index)">+</button>
</td>
<td>
<button @click="handleRemove(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<div>總價: ¥ {{totalPrice}} 元</div>
</template>
<div v-else>購物車為空</div>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--引入JS-->
<script src="index.js"></script>
</body>
</html>
index.js完整程式碼:
//初始化例項
var app = new Vue({
el:'#app',
data:{
list:[
{
id:1,
name:'iPhone10',
price:'6666',
count:1
},
{
id:2,
name:'oppo',
price:'4444',
count:1
},
{
id:3,
name:'筆記本',
price:'88888',
count:1
},
{
id:4,
name:'充電器',
price:'88',
count:1
},
{
id:5,
name:'手機殼',
price:'18',
count:1
}
]
},
computed:{
totalPrice:function(){
var total = 0;
for (var i = 0; i < this.list.length; i++) {
var item = this.list[i];
total += item.price * item.count;
}
return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
}
},
methods:{
handleReduce:function(index){
if (this.list[index].count === 1) {
return;
}
this.list[index].count--;
},
handleAdd:function(index){
this.list[index].count++;
},
handleRemove:function(index){
this.list.splice(index,1);
}
}
})
style.css完整程式碼:
[v-cloak]{
display:none;
}
table{
border:1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
th,td{
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th{
background: #f7f7f7;
color: #5c6b77;
font-weight: 600;
white-space: nowrap;
}
最終的效果圖:
可以加可以減可以移除,總價會隨著商品的變化而變化!