运用for循环和判断来完成点击改变样式
<template>
<div @click="pitchOn(index, item)" v-for="(item, index) in arr" v-bind:key="index" :style="allstyle[clickIndex === index ? 'select' : 'unSelect'].option" class="option">
<div class="money">{{item.money}}元</div>
<div :style="allstyle[clickIndex === index ? 'select' : 'unSelect'].bookCurrency" class="bookCurrency">{{item.bookCurrency}}</div>
<div :style="allstyle[clickIndex === index ? 'select' : 'unSelect'].giveMoney" class="giveMoney">{{item.giveMoney}}</div>
</div>
</template>
export default {
name: 'pay',
data() {
return {
arr: [
{ money: '50', bookCurrency: '20000', giveMoney: '多送30元' },
{ money: '60', bookCurrency: '20000', giveMoney: '多送30元' },
{ money: '70', bookCurrency: '20000', giveMoney: '多送30元' },
{ money: '80', bookCurrency: '20000', giveMoney: '多送30元' },
{ money: '90', bookCurrency: '20000', giveMoney: '多送30元' },
{ money: '100', bookCurrency: '20000', giveMoney: '多送30元' },
{ money: '200', bookCurrency: '20000', giveMoney: '多送30元' }
],
// 这是一个条件样式；当值为'select'时为样式1当值为'unSelect'为样式2
allstyle: {
'select': { bookCurrency: 'border-bottom: 1px solid #1989FA', giveMoney: 'background: #1989FA;', option: 'border: 1px solid #1989FA;'},
'unSelect': { bookCurrency: 'border-bottom: 1px solid #9d9d9d', giveMoney: 'background: #9d9d9d;', option: 'border: 1px solid #9d9d9d;'}
},
clickIndex: -1
}，
methods: {
pitchOn(index, item) {
this.clickIndex = index // 点击事件触发条件改变
}
}
}
}
说明：
clickIndex === index ? ‘select’ : ‘unSelect’
当clickIndex等于index时值为’select’否则为’unSelect’
以此来代入定义好的两种样式状态。