1. 程式人生 > >Vue.js框架練習之購物車

Vue.js框架練習之購物車

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../lib/vue.min.js"></script>
    </head>

    <body>

        <div id="app" style
="position: relative;left: 30%">
<table cellpadding="10"> <thead> <th><input type="checkbox" v-model="cb" v-on:click="allSelect">全選</th> <th>名稱</th> <th>單價</th>
<th>數量</th> <th>金額</th> <th>操作</th> </thead> <tbody> <tr v-for="x in info"> <td><input type="checkbox" v-model
="x.bol" v-on:click="sign()">
</td> <td>
{{x.name}}</td> <td>{{x.price}}</td> <td><input type="number" v-model="x.num" min="0" style="width: 50px;text-align: center" v-on:click="count(x)" v-on:change="count(x)"></td> <td>{{x.total}}</td> <td><button v-on:click="del(x)">刪除</button></td> </tr> </tbody> </table> <Br> <p>總金額:{{all}}</p> </div> <script> var vm = new Vue({ el: "#app", data: { all: 0, cb: false, info: [{ bol: false, name: "iphone7", price: 6000, num: 1, total: 6000 }, { bol: false, name: "榮耀6x", price: 1200, num: 1, total: 1200 }, { bol: false, name: "dell筆記本", price: 4000, num: 1, total: 4000 }] }, methods: { //計算單價 count: function(obj) { for(var i = 0; i < this.info.length; i++) { // if(this.info[i] == obj) { this.info[i].total = obj.price * obj.num; } //如果被選中了,就計算總價格 if(obj.bol) { this.allSelect(); } } }, //刪除 del: function(obj) { this.info.splice(this.info.indexOf(obj), 1) this.allCount(); }, //單選 sign: function() { this.allCount(); }, //全選 allSelect: function() { for(var i = 0; i < this.info.length; i++) { this.info[i].bol = this.cb; } this.allCount(); }, //計算總價 allCount: function() { //每次計算總價都要清空 this.all = 0; for(var i = 0; i < this.info.length; i++) { //計算被選中的商品 if(this.info[i].bol) { this.all += this.info[i].total; } } } } }) </script> </body> </html>

效果圖:
這裡寫圖片描述

相關推薦

Vue.js框架練習購物車

<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head&

Vue.js框架學習筆記

Vue.js中的表單 可以用v-model指令在表單 <input>及 <textarea>元素上建立雙向資料繫結,它會根據控制元件型別自動選取正確的方法來更新元素。 v-model 會忽略所有表單元素的 value、checked、select

Vue.js框架學習筆記

Vue.js中的樣式繫結 class和style是HTML元素的屬性,用於設定元素的樣式,我們可以通過v-bind來設定樣式屬性,可繫結一個數據屬性或者物件。 v-bind:class="..." v-bind:style="..." class例項: <!DOCTYPE

web前端技術內容詳解Vue.js框架

Vue.js是一個漸進式框架,只需要具備基本的HTML/CSS/JavaScript基礎就可以快速上手。在用Vue.js構建大型應用時推薦使用NPM安裝,但是需要注意npm的版本需要大於3.0。在通過npm安裝專案後,我們需要對其目錄進行解析:(1)Build:專案構建(webpack)相關程式碼;(2)co

Vue.js基礎學習 搭建vue.js 專案框架

還是那就俗話,寫部落格的原因就是為記筆記。其實本人也在word 文件上,也記了,但是怕丟。所以寫成部落格,當自己再需要的時候可以檢視。本人主要是c#,asp.net。為了能一人獨立開發一個完整的專案,所以學習一套前端的架構。有錯誤的地方,歡迎大家指出。不說廢話,趕緊利索的寫實

Javascript實踐搭建Vue.js框架篇_3

1、參考網友的經驗安裝Node.js:https://blog.csdn.net/zhaibingbinglove/article/details/79311673安裝好:node(如果部分元件下載timeout時,才需要考慮使用cnpm,建議一開始跳過這步)。本人因幾個月前已經做完這些操作,無法一

Vue.js框架路由練習

/*定義元件*/ const home = { template: '#home', props:{ info:Array,

Vue.js 基礎學習混合mixins

sda itl 實現 var title cte 混合 method ons 混合以一種靈活的方式為組件提供分布復用功能。混合對象可以包含任意的組件選項。當組件使用了混合對象時,混合對象的所有選項將被“混入”組件自己的選項中。 當混合對象與組件包含同名選項時,這些選項將以適

Vue.js checkbox 練習

練習 java method div bsp false methods click vue.js <div id="app"> <input type="checkbox" v-model="sex" value="1" />足球

vue.js框架搭建

img bsp lin 依賴 logs 查看版本 local router run 安裝腳手架 前提條件:已安裝node(4.0版本以上),npm a、全局安裝 vue-cli npm install -g vue-cli 安裝成功後可以通過命令行查看版本號,如圖 b

Vue.js——框架

bin 數據 使用 操作 style src 定義 rec brush 一.什麽是VUE vue 是一個構建用戶界面的javascript框架 特點:輕量,高效 特性:雙向數據綁定,數據驅動視圖 二.vue的使用 1.引入vue.js <script src=v

Vue.js框架 v-model指令

Vue.js v-model v-model.number v-model.lazy v-model.trim v-model 指令在表單 <input> 及 <textarea> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有

vue.js學習02vue-cli腳手架建立專案環境搭建

從開發環境到釋出 http://www.jianshu.com/p/5ba253651c3b,這更詳細,更適合入門      轉載自 http://blog.csdn.net/gebitan505/article/details/56673302 &nb

Vue.js框架--使用反單引號(ES6 引入了模板字元)(二十九)

     在使用vue程式設計中,元件裡面繫結的事件如果有傳入事件名稱字串/字串引數,這個時候光用單雙引號會出現string is  undefined,這個時候我們就需要用到反單引號,那麼反單引號如何輸出?   作用是什麼? &n

Vue.js框架--Vuex實現元件裡資料持久化(二十八)

主要操作技能:      Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式      新聞頁面每次切換路由時,再次訪問就會請求資料;那麼如何直接從vuex中持久化資料呢?      

Vue.js框架--Vuex實現不同元件計數器資料共享(二十七)

主要操作技能:  官網:https://vuex.vuejs.org/zh/ 一、Vuex 解決不同元件資料共享,資料持久化。     1.安裝 cnpm install vuex --save      &nbs

Vue.js框架--路由模組化(二十六)

主要操作技能:   1>建立資料夾\router.js檔案      2>寫入相關路由配置 router.js import Vue from 'vue' //0. 使用路由 import VueRouter from 'vue-

Vue.js框架--Ui框架的Element UI 按需引入(二十五)

主要操作技能:  1>去官網檢視http://element-cn.eleme.io/2.4/#/zh-CN/component/quickstart  藉助 babel-plugin-component,我們可以只引入需要的元件,以達到減小專案體積的目的

Vue.js框架--Ui框架的Element UI(二十四)

主要操作技能:    1>去官網檢視http://element-cn.eleme.io/2.4/#/zh-CN/component/quickstart      2>安裝:  cnpm i element-u

Vue.js 2.0全家桶系列(vuevue-router、axios、vuex)

get set style pack inf del 常用指令 百度網盤 大綱 基於Vue.js 2.3版本, 全面講解Vue.js的教學視頻,讓你少走彎路,直達技術前沿!包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、w