Vuejs如何實現購物車功能
這篇文章將為大家詳細講解有關Vuejs如何實現購物車功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
在鐵山港等地區(qū)，都構建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供成都網站建設、成都網站設計 網站設計制作定制開發(fā),公司網站建設,企業(yè)網站建設,品牌網站建設,營銷型網站,外貿網站建設,鐵山港網站建設費用合理。
js有什么特點
1、js屬于一種解釋性腳本語言；2、在絕大多數瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數據類型未做出嚴格的要求，能夠進行類型轉換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現信息瀏覽或動態(tài)交互，從而有效地防止數據的丟失；5、基于對象的腳本語言，js不僅可以創(chuàng)建對象，也能使用現有的對象。
功能概述
學習了Vue.JS的一些基礎知識，現在利用指令、數據綁定這些基礎知識開發(fā)一個簡單的購物車功能。功能要點如下：
（1）展示商品的名稱、單價和數量；
（2）商品的數量可以增加和減少；
（3）購物車的總價要實時更新，即數量發(fā)生變動，總價也要相應的改變；
（4）商品可以從購物車中移除；
（5）具有選擇功能，只計算選中的商品的總價。
上一張截圖，如下：
代碼
代碼分成三部分，分別是HTML、JS、CSS。關鍵的是HTML和JS。
HTML
Vue 購物車
|
商品名稱 |
商品單價 |
商品數量 |
操作 |
|
{{ item.name }} |
{{ item.price }} |
-
{{ item.count }}
+
|
移除 |
總價：￥ {{ totalPrice }}
購物車為空！
JS
var app = new Vue({
el:'#app',
data:{
list:[
{
id:1,
name:'iPhone 8',
price:8888,
count:1
},
{
id:2,
name:'Huwei Mate10',
price:6666,
count:1
},
{
id:3,
name:'Lenovo',
price:6588,
count:1
}
],
selectList:[],
checked:false
},
computed:{
totalPrice:function(){
var total = 0;
for(var i = 0,len = this.selectList.length;i < len;i++){
var index = this.selectList[i];
var item = this.list[index];
if(item){
total += item.price * item.count;
}
else{
continue;
}
}
return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
}
},
methods:{
handleReduce:function(index){
var item = this.list[index];
if(item.count < 2){
return;
}
item.count--;
},
handleAdd:function(index){
var item = this.list[index];
item.count++;
},
handleRemove:function(index){
this.list.splice(index,1);
},
swapCheck:function(){
var selectList = document.getElementsByName('selectList');
var len = selectList.length;
if(this.checked){
for(var i = 0;i < len;i++){
var item = selectList[i];
item.checked = false;
}
this.checked = false;
this.selectList = [];
}
else{
for(i = 0;i < len;i++){
item = selectList[i];
if(item.checked === false){
item.checked = true;
this.selectList.push(selectList[i].value);
}
}
this.checked = true;
}
}
}
});CSS
[v-cloak]{
display: none;
}
table{
border: 1px solid black;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
th,td{
padding: 8px 16px;
border:1px solid black;
text-align: center;
}
th{
background-color: gray;
}關于“Vuejs如何實現購物車功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
名稱欄目：Vuejs如何實現購物車功能
分享地址：http://weahome.cn/article/jjgsip.html
重慶分公司
重慶分公司
