Instrucciones comunes de Vue
v-if
v-else-if
v-else
v-show:
v-for
v-bind
v-on
v-model
v-pre
v-once
v-cloak
Adición de estilo dinámico
<p :class="activeIndex==1?'active':''"></p>
<p :style="{color:activeIndex==1?'red':'blue'}"></p>
Caja individual
<!-- 单选框性别修改 -->
<ul class="content">
<li :class="activeIndex==0?'active':''" @click="active=0">男</li>
<li :class="activeIndex==1?'active':''" @click="active=1">女</li>
</ul>
<!-- 逻辑代码 -->
data(){
return{
activeIndex:0,
}
},
<!-- 样式 -->
.content {
background: #fff;
margin: 2.66667vw 0;
padding: 1.33333vw 4vw;
background-size: 0.4rem 0.4rem;
li {
height: 14.66667vw;
line-height: 14.66667vw;
font-size: 3.73333vw;
color: #595959;
position: relative;
}
.active {
background: url() no-repeat 100%;
background-size: 4vw 4vw;
}
}
Caja
<!-- 多选框 -->
<span class="selfCheckBox" @click="clickCheckBox(index)" v-for="(item,index) in arr" :key="index">
<span class="selfCkeckImgBox">
<img v-show="item.a==1" src="选中的图片路径" alt="选中图标">
<img v-show="item.a==0" src="未选中的图片路径" alt="未选中图标">
</span>
<span class="checkBoxText">{
{
item.text }}</span>
</span>
<!-- 逻辑代码 -->
data: {
arr: [
{
text: '多选框1',
a: 0
},
{
text: '多选框2',
a: 0
},
{
text: '多选框3',
a: 0
},
{
text: '多选框4',
a: 0
}
]
},
methods: {
clickCheckBox(index) {
if (this.arr[index].a == 1) {
this.arr[index].a = 0;
} else {
this.arr[index].a = 1
}
}
}
<!-- 样式 -->
.selfCheckBox {
cursor: pointer;
}
.selfCkeckImgBox img {
width: 30px;
height: 30px;
}
.checkBoxText {
margin-left: 10px;
}