欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實(shí)現(xiàn)購(gòu)物車計(jì)算總價(jià)功能

 更新時(shí)間：2022年04月14日 17:06:47   作者：coder_wb  
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)購(gòu)物車計(jì)算總價(jià)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

用Vue實(shí)現(xiàn)一個(gè)購(gòu)物車計(jì)算總價(jià)的功能，供大家參考，具體內(nèi)容如下

代碼

html

<div id="app">
? ? ? ? <div class="panel panel-info">
? ? ? ? ? ? <div class="panel-heading">
? ? ? ? ? ? ? ? <h3 class="panel-title">購(gòu)物車</h3>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="panel-body">

? ? ? ? ? ? ? ? <div class="checkbox">
? ? ? ? ? ? ? ? ? ? <label>
? ? ? ? ? ? ? ? ? ? ? ? <input type="checkbox" v-model="checkAll">
? ? ? ? ? ? ? ? ? ? ? ? 全選
? ? ? ? ? ? ? ? ? ? </label>
? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? <ul class="list-group">
? ? ? ? ? ? ? ? ? ? <li class="list-group-item" v-for="(item) in list" :key="item.id">
? ? ? ? ? ? ? ? ? ? ? ? <div class="checkbox">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <label>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <input type="checkbox" v-model="item.checked">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{item.name}}--{{item.price}}*{{item.quantity}}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <button type="button" @click="item.quantity>1?item.quantity-=1:1"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? class="btn btn-success">-</button>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <button type="button" @click="item.quantity+=1" class="btn btn-success">+</button>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </label>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? <p>總價(jià)：{{sumPrice}}</p>
? ? ? ? ? ? </div>
? ? ? ? </div>
</div>

js

<script src="./libs/vue.js"></script>
? ? <script>
? ? ? ? new Vue({
? ? ? ? ? ? el: "#app",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? list: [
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? id: 1,
? ? ? ? ? ? ? ? ? ? ? ? name: "小米10",
? ? ? ? ? ? ? ? ? ? ? ? price: 3999,
? ? ? ? ? ? ? ? ? ? ? ? checked: false,
? ? ? ? ? ? ? ? ? ? ? ? quantity: 1

? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? id: 2,
? ? ? ? ? ? ? ? ? ? ? ? name: "榮耀30",
? ? ? ? ? ? ? ? ? ? ? ? price: 2999,
? ? ? ? ? ? ? ? ? ? ? ? checked: false,
? ? ? ? ? ? ? ? ? ? ? ? quantity: 1

? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? id: 3,
? ? ? ? ? ? ? ? ? ? ? ? name: "魅族17",
? ? ? ? ? ? ? ? ? ? ? ? price: 3699,
? ? ? ? ? ? ? ? ? ? ? ? checked: false,
? ? ? ? ? ? ? ? ? ? ? ? quantity: 1

? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? id: 4,
? ? ? ? ? ? ? ? ? ? ? ? name: "蘋果11",
? ? ? ? ? ? ? ? ? ? ? ? price: 5499,
? ? ? ? ? ? ? ? ? ? ? ? checked: false,
? ? ? ? ? ? ? ? ? ? ? ? quantity: 1

? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ],
? ? ? ? ? ? },
? ? ? ? ? ? // computed計(jì)算屬性，
? ? ? ? ? ? // ?他有一個(gè)特點(diǎn)，可以依賴當(dāng)前數(shù)據(jù)改變之后進(jìn)行重新計(jì)算
? ? ? ? ? ? computed: {
? ? ? ? ? ? ? ? checkAll: {

? ? ? ? ? ? ? ? ? ? //設(shè)置值，當(dāng)點(diǎn)擊全選按鈕的時(shí)候觸發(fā)
? ? ? ? ? ? ? ? ? ? set(v) {
? ? ? ? ? ? ? ? ? ? ? ? this.list.forEach((item) => (item.checked = v))
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? //取值，當(dāng)列表中的值改變之后觸發(fā)，需要return
? ? ? ? ? ? ? ? ? ? get() {
? ? ? ? ? ? ? ? ? ? ? ? return (
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.list.length ===
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.list.filter((item) => item.checked).length
? ? ? ? ? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? //計(jì)算總價(jià)，選擇被選中的元素
? ? ? ? ? ? ? ? sumPrice() {
? ? ? ? ? ? ? ? ? ? return this.list.filter((item) => item.checked).reduce((pre, cur) => {
? ? ? ? ? ? ? ? ? ? ? ? return pre + cur.price * cur.quantity
? ? ? ? ? ? ? ? ? ? }, 0)
? ? ? ? ? ? ? ? },

? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? save() {
? ? ? ? ? ? ? ? ? ? console.log(this.list.filter((item) => item.checked))
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
</script>

結(jié)構(gòu)是用bootstrap寫的，記得下載并引入文件

<link rel="stylesheet" href="./bootstrap.min.css" >

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論