vue2.0中vue-cli實現(xiàn)全選、單選計算總價格的實例代碼
更新時間：2017年07月18日 09:47:01 作者：pearl007
本篇文章主要介紹了vue2.0中vue-cli實現(xiàn)全選、單選計算總價格的實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
由于工作的需要并鑒于網(wǎng)上的vue2.0中vue-cli實現(xiàn)全選、單選方案不合適，自己寫了一個簡單實用的。就短短的126行代碼。
<template>
<div>
<table>
<tr>
<td><input type="checkbox" v-model="checkAll">全選({{checkedCount}})</td>
<td>產(chǎn)品名稱</td>
<td>價格</td>
<td>數(shù)量</td>
</tr>
<tr v-for="(item,$index) in lists">
<td><span v-show="checkedCount===lists.length || item.checked===true">我被選中</span><input type="checkbox" :value="item.id" v-model="checked" @click="currClick(item,$index)"></td>
<td>{{item.productName}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
</tr>
<tr>
總價：{{totalMoney}}
</tr>
</table>
</div>
</template>
<script>
export default{
data() {
return {
checked:[],
totalPrice:[],
lists : [
{
productName:'產(chǎn)品1',
price:'24',
count:'3',
id:1
},
{
productName:'產(chǎn)品2',
price:'25',
count:'6',
id:2
},
{
productName:'產(chǎn)品3',
price:'54',
count:'7',
id:3
}
]
}
},
computed:{
totalMoney:function(item,index){
let sum = 0;
for(let i=0;i<this.totalPrice.length;i++){
sum += this.totalPrice[i];
};
return sum;
},
checkAll: {
get: function() {
return this.checkedCount == this.lists.length;
},
set: function(value){
var _this = this;
if (value) {
this.totalPrice = [];
this.checked = this.lists.map(function(item) {
item.checked = true;
let total = item.price*item.count;
_this.totalPrice.push(total);
return item.id
})
}else{
this.checked = [];
this.totalPrice=[];
this.lists.forEach(function(item,index){
item.checked = false;
});
}
}
},
checkedCount: {
get: function() {
return this.checked.length;
}
}
},
methods:{
currClick:function(item,index){
var _this = this;
if(typeof item.checked == 'undefined'){
this.$set(item,'checked',true);
let total = item.price*item.count;
this.totalPrice.push(total);
console.log(this.totalPrice);
}else{
item.checked = !item.checked;
if(item.checked){
this.totalPrice = [];
this.lists.forEach(function(item,index){
if(item.checked){
let total = item.price*item.count;
_this.totalPrice.push(total);
}
});
}else{
this.totalPrice = [];
this.lists.forEach(function(item,index){
if(item.checked){
let total = item.price*item.count;
_this.totalPrice.push(total);
}
});
}
}
}
}
}
</script>
<style>
tr td{
width:200px;
background: #eee;
padding:10px 0;
}
</style>
效果：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了如何使用vue實現(xiàn)導(dǎo)出word文檔（包括圖片）,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
Vue?quill-editor?編輯器使用及自定義toobar示例詳解
這篇文章主要介紹了Vue quill-editor編輯器使用及自定義toobar示例詳解,這里講解編輯器quil-editor的知識結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-07-07
基于Vue實現(xiàn)HTML轉(zhuǎn)PDF并導(dǎo)出
這篇文章主要為大家介紹了三種方法，可以實現(xiàn)將HTML頁面轉(zhuǎn)為PDF并實現(xiàn)下載。文中的示例代碼講解詳細，感興趣的小伙伴可以學(xué)習(xí)一下2022-04-04
這篇文章主要介紹了Vuex的熱更替如何實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了使用vue的transition完成滑動過渡的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了Antd表格滾動 寬度自適應(yīng) 不換行的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
上傳圖片不管是后臺還是前端小程序，上傳圖片都是一個比不可少的功能有時候需要好幾個頁面都要上傳圖片，每個頁面都寫一個非常不方便，本文就給大家介紹vue如何封裝一個上傳多張圖片的組件,需要的朋友可以參考下2023-07-07
vue router帶參數(shù)頁面刷新或回退參數(shù)消失的解決方法
這篇文章主要介紹了vue router帶參數(shù)頁面刷新或回退參數(shù)消失的解決方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
Vue.js常用指令之循環(huán)使用v-for指令教程
這篇文章主要跟大家介紹了關(guān)于Vue.js常用指令之循環(huán)使用v-for指令的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-06-06
Vue.js實戰(zhàn)之利用vue-router實現(xiàn)跳轉(zhuǎn)頁面
對于單頁應(yīng)用，官方提供了vue-router進行路由跳轉(zhuǎn)的處理，這篇文章主要給大家介紹了Vue.js實戰(zhàn)之利用vue-router實現(xiàn)跳轉(zhuǎn)頁面的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-04-04