用VUE实现简单的单选效果
<template><view class="content"><view :class="{'box':sIn == index ? true : false}" v-for="(item,index) in arr" :key="index" @click="ch(index)">数组的第{{index+1}}个:{{item}}</view>&
·
<template>
<view class="content">
<view :class="{'box':sIn == index ? true : false}" v-for="(item,index) in arr" :key="index" @click="ch(index)">
数组的第{{index+1}}个:{{item}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
b : true,
H : '<div>我是div</div>',
arr:["篮球","羽毛球","乒乓球","排球"],
bOn: false,
sIn : ""
}
},
onLoad() {
},
methods: {
ch (i){
this.sIn = i;
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.box{
width: 200px;
height: 20px;
background-color: #007AFF;
}
</style>
效果如下
更多推荐
所有评论(0)