Vue.js框架練習之購物車

阿新 • • 發佈：2019-01-20

<!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學習02之vue-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之全家桶系列（vue、vue-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

Vue.js框架練習之購物車

相關推薦