快捷導(dǎo)航

vue實(shí)現(xiàn)購(gòu)物車(chē)的監(jiān)聽(tīng)

更新時(shí)間：2020年04月20日 09:50:22 作者：loving-cat

這篇文章主要為大家詳細(xì)介紹了利用vue的監(jiān)聽(tīng)事件實(shí)現(xiàn)一個(gè)簡(jiǎn)單購(gòu)物車(chē)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

利用vue簡(jiǎn)單實(shí)現(xiàn)購(gòu)物車(chē)的監(jiān)聽(tīng)，供大家參考，具體內(nèi)容如下

主要運(yùn)用的vue的監(jiān)聽(tīng)，有興趣的可以看看實(shí)現(xiàn)過(guò)程

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>利用vue實(shí)現(xiàn)對(duì)購(gòu)物車(chē)的監(jiān)聽(tīng)</title>
 <script src="../vue.js"></script>
 <style type="text/css">
 table{
 border: 1px solid black;
 width: 100%;
 text-align: center;
 }
 th{
 height: 50px;
 }
 th, td{
 border-bottom: 1px solid #ddd;
 border-right: 1px solid #ddd;
 }
 </style>
 </head>
 <body>
 <div id="app">
 <h1>訂單系統(tǒng)</h1>
 <table>
 <tr>
  <th>編號(hào)</th>
  <th>名稱</th>
  <th>品牌</th>
  <th>價(jià)格</th>
  <th>數(shù)量</th>
  <th>操作</th>
 </tr>
 <tr v-for="val in items">
  <td>{{val.id}}</td>
  <td>{{val.name}}</td>
  <td>{{val.pinpai}}</td>
  <td>{{val.price}}</td>
  <td>
  <!-- 如果count等于0執(zhí)行v-bind
  綁定一個(gè)點(diǎn)擊事件 -->
  <button v-bind:disabled="val.count === 0" @click="val.count-=1">-</button>
  {{val.count}}
  <button @click="val.count+=1">+</button>
  
  </td>
  <td>
  <button v-on:click="val.count = 0">移除</button>
  </td>
  
 </tr>
 </table>
 <!-- 調(diào)用totalPrice -->
 你所需要支付總額為：${{totalPrice()}}
  
 </div>
 
 <script type="text/javascript" charset="UTF-8">
 var vm = new Vue({
 el:"#app",
 data:{
  items:[{
  id:1,
  name:'上衣',
  pinpai:'阿迪達(dá)斯',
  price:100,
  count:1
  },
  {
  id:2,
  name:'褲子',
  pinpai:'安踏',
  price:528,
  count:1
  },
  {
  id:3,
  name:'鞋子',
  pinpai:'耐克',
  price:999,
  count:1
  }]
 },
 
 methods:{
  totalPrice:function(){
  var totalPri = 0;
  //總價(jià)等于數(shù)量乘以數(shù)量
  for(var i=0;i<this.items.length;i++){
  totalPri += this.items[i].price*this.items[i].count;
  }
  return totalPri;
  }
 }
 });
 
 </script>
 
 
 </body>
</html>

實(shí)現(xiàn)效果：

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

您可能感興趣的文章:

相關(guān)文章

Vue3使用setup如何定義組件的name屬性詳解
vue3中新增了setup,它的出現(xiàn)是為了解決組件內(nèi)容龐大后,理解和維護(hù)組件變得困難的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Vue3使用setup如何定義組件的name屬性的相關(guān)資料,需要的朋友可以參考下
2022-06-06
vue實(shí)現(xiàn)側(cè)邊欄導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)側(cè)邊欄導(dǎo)航效果，右側(cè)顯示對(duì)應(yīng)內(nèi)容，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
element的表單校驗(yàn)證件號(hào)規(guī)則及輸入“無(wú)”的情況校驗(yàn)通過(guò)(示例代碼)
這篇文章主要介紹了element的表單校驗(yàn)證件號(hào)規(guī)則及輸入“無(wú)”的情況校驗(yàn)通過(guò),使用方法對(duì)校驗(yàn)數(shù)據(jù)進(jìn)行過(guò)濾判斷,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
2023-11-11
詳解Vue ElementUI手動(dòng)上傳excel文件到服務(wù)器
這篇文章主要介紹了詳解Vue ElementUI手動(dòng)上傳excel文件到服務(wù)器，對(duì)ElementUI感興趣的同學(xué)，可以參考下
2021-05-05
加速vue組件渲染之性能優(yōu)化
這篇文章主要介紹了加速vue組件渲染之性能優(yōu)化，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
Vue中 axios delete請(qǐng)求參數(shù)操作
這篇文章主要介紹了Vue中 axios delete請(qǐng)求參數(shù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
解決Vue運(yùn)行項(xiàng)目報(bào)錯(cuò)proxy?error:?could?not?proxy?request
這篇文章主要給大家介紹了關(guān)于如何解決Vue運(yùn)行項(xiàng)目報(bào)錯(cuò)proxy?error:could?not?proxy?request的相關(guān)資料,Proxy Error指的是代理服務(wù)器無(wú)法正確處理請(qǐng)求的錯(cuò)誤,需要的朋友可以參考下
2023-08-08
深入了解Vue3中偵聽(tīng)器watcher的實(shí)現(xiàn)原理
在平時(shí)的開(kāi)發(fā)工作中，我們經(jīng)常使用偵聽(tīng)器幫助我們?nèi)ビ^察某個(gè)數(shù)據(jù)的變化然后去執(zhí)行一段邏輯。在?Vue.js?2.x?中，你可以通過(guò)?watch?選項(xiàng)去初始化一個(gè)偵聽(tīng)器，稱作?watcher。本文將詳細(xì)為大家介紹一下偵聽(tīng)器的實(shí)現(xiàn)原理，需要的可以參考一下
2022-04-04
Element中el-table動(dòng)態(tài)合并單元格(span-method方法)
本文主要介紹了Element中el-table動(dòng)態(tài)合并單元格(span-method方法)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
spring-cloud-stream的手動(dòng)消息確認(rèn)問(wèn)題
這篇文章主要介紹了spring-cloud-stream的手動(dòng)消息確認(rèn)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05