當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

vue学习笔记3 购物车实例

發布時間：2023/12/13 综合教程 27 生活家

生活随笔收集整理的這篇文章主要介紹了 vue学习笔记3 购物车实例小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1 html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>購物車</title>
        <script src="vue.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body >
      <div id="app">
       <div v-if="books.length">
           <table>
            <thead>
                <tr>
                    <th></th>
                    <th>書籍名稱</th>
                    <th>出版日期</th>
                    <th>價格</th>
                    <th>購買數量</th>
                    <th>操作</th>
                </tr>
            </thead>
            
            <tbody>
                <tr v-for="(item,index)  in books">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.date}}</td>
                    <td>{{item.price | getFinalPriceF}}</td>
                        
                    <td>
                        <button @click='decrement(index)' v-bind:disabled=" item.count > 1 ? false :true">-</button>
                        {{item.count}}
                        <button @click='increment(index)'>+</button>
                    </td>
                    <td>
                        <button @click="removeHandle(index)">移除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <h1>總價格：{{totalPrice |getFinalPriceF}}</h1>
       </div>
       <h2 v-else>購物車為空</h2>
      </div>
    </body>
    <!--js要加載在最后面！！-->
    <script src="mian.js" type="text/javascript"> </script>
</html>

View Code

2 main.js

const app=new Vue({
    el:"#app",
    data:{
        books:[
            {
                id:1,
                name:'《算法導論》',
                date:'2010-8',
                price:85.00,
                count:1
            },
            {
                id:2,
                name:'《UNIX編程藝術》',
                date:'2010-9',
                price:75.00,
                count:1
            },
            {
                id:3,
                name:'《編程珠璣》',
                date:'2000-8',
                price:51.00,
                count:1
            },
            {
                id:4,
                name:'《代碼大全》',
                date:'2008-8',
                price:95.00,
                count:1
            }
        ],
        
    },
    computed:{
        totalPrice(){
            let totalPrice=0
            for(let i=0;i<this.books.length;i++){
                totalPrice += this.books[i].price * this.books[i].count
            }
            return totalPrice
        }
    },
    methods:{
        getFinalPrice(price){
            return '￥'+ price.toFixed(2)
        },
        decrement(index){
            if(this.books[index].count>=1){
                this.books[index].count--
            }
        },
        increment(index){
            this.books[index].count++
        },
        removeHandle(index){
            this.books.splice(index,1)
        }
    },
    filters:{ //過濾器
        getFinalPriceF(price){
            return '￥'+ price.toFixed(2)
        }
    }
})

View Code

3 style.css

table {
    border:1px solid #e9e9e9;
    border-collapse:collapse;
    border-spacing:0;
}

th,td {
    padding:8px 16px;
    border:1px solid #e9e9e9;
    text-align:left;
}
th {
    background-color:#f7f7f7;
    color:#5c6b77;
    
}

View Code

過濾器

filters:{ //過濾器
        getFinalPriceF(price){
            return '￥'+ price.toFixed(2)
        }
    }

使用方法

<h1>總價格：{{totalPrice |getFinalPriceF}}</h1>

idsabled屬性

 v-bind:disabled=" item.count > 1 ? false :true"

當數量小于等于1時按鈕不可用

循環的簡略寫法 in of

//1 普通的for循環
        totalPrice(){
            let totalPrice=0
            for(let i=0;i<this.books.length;i++){
                totalPrice += this.books[i].price * this.books[i].count
            }
            return totalPrice
        },
        //2  in 拿到i
        totalPrice2(){
            let totalPrice=0
            for(let i in this.books){
                totalPrice += this.books[i].price * this.books[i].count
            }
            return totalPrice
        },
        //3  of 拿到item
        totalPrice3(){
            let totalPrice=0
            for(let item of this.books){
                totalPrice += item.price *item.count
            }
            return totalPrice
        }

三種寫法效果相同，推薦使用3

高階函數與箭頭函數//filter /map/reduce

//filter也是一個常用的操作，它用于把Array的某些元素過濾掉，然后返回剩下的元素。和map()類似，Array的filter()也接收一個函數。和map()不同的是，filter()把傳入的函數依次作用于每個元素，然后根據返回值是true還是false決定保留還是丟棄該元素。
const nums = [10,99,22,3,44,34,24,65]
newNums = nums.filter(function(n){
//    if(n>50){
//        return true //返回true 則加到新的數組里
//    }else{
//        return false //返回false 則
//    }
    return n>50
})
console.log(newNums)
//map每次返回 值會作為新的值
newNums2 = newNums.map(function(n){
    return n*2
})
console.log(newNums2)

//reduce 對數組中的所有數據進行匯總
//preValue 上一次返回的值
// 第一次時 初始化值為0 所以preValue為0 
// 第二次時 初始化值為上一次的返回值 
newNums3 = newNums2.reduce(function(preValue,n){
    return preValue+n
},0)
console.log(newNums3)

View Code

鏈式寫法

//鏈式寫法
let total = nums.filter(function(n){
    return n>50
}).map(function(n){
    return n*2
}).reduce(function(preValue,n){
    return preValue+n
},0)

console.log(total)

View Code

箭頭函數寫法

//更簡潔的箭頭函數
let total2 = nums.filter(n => n>50).map(n=> n*2).reduce((pre,n)=>pre +n)
console.log(total2)

將總價格改成高階函數的形式

totalPrice(){
            return this.books.reduce(function(preValue,book){
                return  preValue + book.price * book.count
            },0)
        }

totalPrice(){
            return this.books.reduce((preValue,book) =>  (preValue + book.price * book.count),0)
        }

總結

以上是生活随笔為你收集整理的vue学习笔记3 购物车实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：京东2022年上半年卖最火的三本书：《三
下一篇：新一代开源VoIP协议栈－－OPAL(O

综合教程

vue学习笔记3 购物车 实例

過濾器

idsabled屬性

循環的簡略寫法 in of

高階函數與箭頭函數//filter /map/reduce

總結

vue学习笔记3 购物车实例