快捷導(dǎo)航

vue編寫(xiě)簡(jiǎn)單的購(gòu)物車(chē)功能

更新時(shí)間：2021年01月08日 08:21:24 作者：狗子_Lyi

這篇文章主要為大家詳細(xì)介紹了vue編寫(xiě)簡(jiǎn)單的購(gòu)物車(chē)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

使用vue寫(xiě)出簡(jiǎn)單的購(gòu)物車(chē)，供大家參考，具體內(nèi)容如下

代碼：

// An highlighted block
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  .cl{
   border: 1px solid black;
   width: 300px;
   margin: 30px;
   padding: 15px;
  }
 </style>
</head>
<body>
 <div id="app">
  <div class="cl" v-for="(item,index) in items">
   <h4>{{item.sname}}</h4>
   <button @click="item.sum==0?item.sum==0:item.sum--">-</button>
   <span>{{item.sum}}</span>
   <button @click="item.sum++">+</button>
   <span>{{item.sprice}}元/斤</span>
  </div>

  <table>
   <tr>
    <th>選擇</th>
    <th>商品名</th>
    <th>商品數(shù)量</th>
    <th>商品價(jià)格</th>
   </tr>
   <tr v-for="(item,index) in items">
    <td><input type="checkbox" :checked="item.isSelect" @click="item.isSelect=!item.isSelect"></td>
    <td>{{item.sname}}</td>
    <td>{{item.sum}}</td>
    <td>{{item.sprice*item.sum}}</td>
   </tr>
   <tr>
    <td><input type="checkbox" @click="selectProduct(isSelectAll)" :checked="isSelectAll">全選</tf>
    <td>合計(jì)</tf>
    <td>{{total.totalNum}}</tf>
    <td>{{total.totalPrice}}</tf>
   </tr>
  </table>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
  new Vue({
   el:'#app',
   data:{
    items:[
     {
      'sname':'蘋(píng)果',
      'sum':1,
      'sprice':'10',
     },
     {
      'sname':'香蕉',
      'sum':1,
      'sprice':'12',
     },
     {
      'sname':'橘子',
      'sum':1,
      'sprice':'8',
     },
    ]
   },
   methods:{
    selectProduct:function(_isSelect){
     for(var i=0 ,len=this.items.length;i<len;i++){
      this.items[i].isSelect=!_isSelect;
     }
    },
    
   },
   computed:{
    isSelectAll:function(){
     return this.items.every(function(val){return val.isSelect})
    },
     total:function(){
     var prolist = this.items.filter(function(val){return val.isSelect});
     totalpri = 0;
     totalnum = 0;
     for (var i = 0;i<prolist.length;i++){
      totalpri+=prolist[i].sprice*prolist[i].sum;
      totalnum+=prolist[i].sum
     }
     
     return{totalNum:totalnum,totalPrice:totalpri}
    }
   },
   mounted:function(){
    var _this=this;
    this.items.map(function(item){
     _this.$set(item,'isSelect',false)
    })
   }
  })
 </script>
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目前端錯(cuò)誤收集之sentry教程詳解
Sentry 是一個(gè)開(kāi)源的錯(cuò)誤追蹤工具，可以幫助開(kāi)發(fā)人員實(shí)時(shí)監(jiān)控和修復(fù)系統(tǒng)中的錯(cuò)誤。這篇文章主要介紹了vue項(xiàng)目前端錯(cuò)誤收集之sentry,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-05-05
vue之el-form表單校驗(yàn)以及常用正則詳解
這篇文章主要介紹了vue之el-form表單校驗(yàn)以及常用正則，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue中字符串如何拼接路由path路徑
這篇文章主要介紹了vue中字符串如何拼接路由path路徑方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-12-12
vue自定義指令的創(chuàng)建和使用方法實(shí)例分析
這篇文章主要介紹了vue自定義指令的創(chuàng)建和使用方法,結(jié)合完整實(shí)例形式分析了vue.js創(chuàng)建及使用自定義指令的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
2018-12-12
vue 彈出遮罩層樣式實(shí)例
這篇文章主要介紹了vue 彈出遮罩層樣式實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
vue2前端調(diào)用WebSocket有消息進(jìn)行通知代碼示例
在Vue項(xiàng)目中實(shí)現(xiàn)全局的消息鏈接監(jiān)聽(tīng)主要涉及到了WebSocket技術(shù),這是一種雙向通信協(xié)議,允許客戶端與服務(wù)器之間實(shí)時(shí)、高效地交換數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于vue2前端調(diào)用WebSocket有消息進(jìn)行通知的相關(guān)資料,需要的朋友可以參考下
2024-07-07
Vue實(shí)現(xiàn)星級(jí)評(píng)價(jià)效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)星級(jí)評(píng)價(jià)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue項(xiàng)目打包、合并及壓縮優(yōu)化網(wǎng)頁(yè)響應(yīng)速度
網(wǎng)站頁(yè)面的響應(yīng)速度與用戶體驗(yàn)息息相關(guān),直接影響到用戶是否愿意繼續(xù)訪問(wèn)你的網(wǎng)站,所以這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包、合并及壓縮優(yōu)化網(wǎng)頁(yè)響應(yīng)速度的相關(guān)資料,需要的朋友可以參考下
2021-07-07
vue中el-date-picker選擇日期的限制的項(xiàng)目實(shí)踐
ElementUI的el-date-picker使用時(shí),有時(shí)候想要限制用戶選擇的時(shí)間范圍,本文就來(lái)介紹了vue中el-date-picker選擇日期的限制的項(xiàng)目實(shí)踐,感興趣的可以了解一下
2023-10-10
Vuex中五個(gè)屬性以及使用方法詳解
這篇文章主要給大家介紹了關(guān)于Vuex中五個(gè)屬性以及使用的相關(guān)資料,Vuex是一個(gè)專(zhuān)為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-09-09