vue点击li切换样式并且获取当前点击的值
<ul><li v-for="(item,index) in moneyList" :key="index" :class="flag==index?'choosed':'choosed1'" @click="choosePay(index)"> {{item}}元 </li></ul>css代码:ul,li{displa...
·
<ul>
<li v-for="(item,index) in moneyList" :key="index" :class="flag==index?'choosed':'choosed1'" @click="choosePay(index)"> {{item}}元 </li>
</ul>
css代码:
ul,li{
display: inline-block;
}
li{
width:29%;
margin:5px 5px;
padding:10px 0;
font-size: 0.8em;
text-align: center;
border-radius: 5px;
}
.choosed{
color: #fff;
border: 1px solid #0e93f6;
background-color: #0e93f6;
}
.choosed1{
color: #7c7e7e;
border: 1px solid #7c7e7e;
}
js代码:
data () {
moneyList: [10, 100, 200, 300, 400, 500, 600],
flag: -1,
value: '' // 点击li获取的值
},
methods: {
choosePay (index) {
let t = this
t.flag = index
t.value = moneyList[index]
},
}
更多推荐
已为社区贡献2条内容
所有评论(0)