vue2.0中vue-cli實(shí)現(xiàn)全選、單選計(jì)算總價(jià)格的實(shí)例代碼
更新時(shí)間：2017年07月18日 09:47:01 作者：pearl007
本篇文章主要介紹了vue2.0中vue-cli實(shí)現(xiàn)全選、單選計(jì)算總價(jià)格的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
由于工作的需要并鑒于網(wǎng)上的vue2.0中vue-cli實(shí)現(xiàn)全選、單選方案不合適，自己寫了一個(gè)簡單實(shí)用的。就短短的126行代碼。
<template>
<div>
<table>
<tr>
<td><input type="checkbox" v-model="checkAll">全選({{checkedCount}})</td>
<td>產(chǎn)品名稱</td>
<td>價(jià)格</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>
總價(jià)：{{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實(shí)現(xiàn)導(dǎo)出word文檔的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)導(dǎo)出word文檔（包括圖片）,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
Vue?quill-editor?編輯器使用及自定義toobar示例詳解
這篇文章主要介紹了Vue quill-editor編輯器使用及自定義toobar示例詳解,這里講解編輯器quil-editor的知識結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
基于Vue實(shí)現(xiàn)HTML轉(zhuǎn)PDF并導(dǎo)出
這篇文章主要為大家介紹了三種方法，可以實(shí)現(xiàn)將HTML頁面轉(zhuǎn)為PDF并實(shí)現(xiàn)下載。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以學(xué)習(xí)一下2022-04-04
這篇文章主要介紹了Vuex的熱更替如何實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
使用vue的transition完成滑動(dòng)過渡的示例代碼
這篇文章主要介紹了使用vue的transition完成滑動(dòng)過渡的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
Antd表格滾動(dòng) 寬度自適應(yīng) 不換行的實(shí)例
這篇文章主要介紹了Antd表格滾動(dòng) 寬度自適應(yīng) 不換行的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
上傳圖片不管是后臺還是前端小程序，上傳圖片都是一個(gè)比不可少的功能有時(shí)候需要好幾個(gè)頁面都要上傳圖片，每個(gè)頁面都寫一個(gè)非常不方便，本文就給大家介紹vue如何封裝一個(gè)上傳多張圖片的組件,需要的朋友可以參考下2023-07-07
vue router帶參數(shù)頁面刷新或回退參數(shù)消失的解決方法
這篇文章主要介紹了vue router帶參數(shù)頁面刷新或回退參數(shù)消失的解決方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
Vue.js常用指令之循環(huán)使用v-for指令教程
這篇文章主要跟大家介紹了關(guān)于Vue.js常用指令之循環(huán)使用v-for指令的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-06-06
Vue.js實(shí)戰(zhàn)之利用vue-router實(shí)現(xiàn)跳轉(zhuǎn)頁面
對于單頁應(yīng)用，官方提供了vue-router進(jìn)行路由跳轉(zhuǎn)的處理，這篇文章主要給大家介紹了Vue.js實(shí)戰(zhàn)之利用vue-router實(shí)現(xiàn)跳轉(zhuǎn)頁面的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-04-04