vue小白學習筆記0 購物車

第乙個實戰：寫乙個購物車例項

為了從零開始學習，vue.js檔案是用引入的。

用兩個v-for實現兩個商品組

v-cloak>

v-if="list.length">
type="checkbox"
name=""
id=""
:checked="checkedall" @click="checkall">
th>
序號th>
商品名稱th>
商品單價th>
購買數量th>
操作th>
tr>
thead>
v-for="(item,index) in newlist">
:key="index">
v-for="(item_child,idx) of item">
type="checkbox"
name=""
id=""
:checked="item_child.checked" @click="check(index,idx)">
td>
}td>
}td>
}td>
:disabled="item_child.disabled">-button>
}span>
+button>
td>
移除button>
td>
tr>
tbody>
template>
table>
總價：￥ 
}元div>
template>
v-else>購物車為空div>
div>

data: ,,,

],[,,,

,]

],}, /* 計算屬性 */

computed: }}

// 返回新增千位分隔符的字串

return total.tostring().replace(/\b(?=(\d)+$)/g, ',');

},newlist: function

() else }}

return

this.list;

},}, /* 方法 */

methods:

this.list[index].count--;

},//增加商品數量

handleadd: function

(index) ,

//刪除商品

handleremove: function

(index) ,

//全選，全不選

checkall: function

() }

console.log('全選：', this.checkedall, ', this_checked:', this.checkedall);

},//選中商品，取消選中

check: function

(index, idx) else }}

// console.log('改變後', this.newlist);

}}, /*例項已掛載*/

mounted: function

() });

Vue購物車例項

這是效果圖 看起來很簡單是不是 之前一直寫jquery 總是想著 dom 操作 思維感覺沒有切換過來 想了很久,最後使用vue的屬性進行控制,實現了多選計算屬性的功能 直接上原始碼 編號商品名稱 商品單價 購買數量 操作 移除 總價 購物車為空 這個路徑要修改,就不多說了 data isallche...

Vue購物車實戰

最近學習在學由梁灝著作的vue.js實戰，其中有一章講述如何用vue開發購物車的章節，即課後練習，以下書中的開發過程即本人的課後練習，希望能對你學習vue有所幫助。通過增加或減少商品的數量來控制商品總價 v cloak table thth,td練習一 在當前示例基礎上擴充套件商品列表，新增一項是否...

購物車 （vue做法）

doctype html en utf 8 viewport content width device width,initial scale 1.0 購物車 title table table th table td style head table 全選 checkbox style xua v...