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學習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