先展示样式效果
代码如下
html:循环遍历数组展示单选内容,点击后绑定picked值会与value值相等,
若v-model值和:value值相等就会触发checked=true
<div v-for="(i,index) of dd" :key="index"> <label class="myRadio"> <input type = "radio" v-model="picked" :value="i"/> <span>{{i}}</span> </label> </div> <p>选择的项是:{{picked}}</p>
script:
data () { return { picked: 'js', dd: ['html', 'js', 'css'] } }, watch: { picked () { console.log('changed') } },
css样式
隐藏原radio,并添加兄弟节点span,重写input的响应样式会直观作用到span
.test { height: 100%; background: #F3F7F8; padding-top: 1rem; .myRadio { width: 80%; margin-left: 10%; margin-bottom: 0.2rem; display: block; cursor: pointer; } .myRadio input[type="radio"] { outline: none; display: none } .myRadio input[type="radio"] + span{ color: black; display: block; width: 100%; height: 0.7rem; background: #FFFFFF; border-radius: 0.103rem; box-shadow: 3px 5px 4px 0 rgba(189,188,188,0.36); font-size: 0.35rem; line-height: 0.7rem; text-indent: 0.2rem; } .myRadio input[type="radio"]:checked + span { background-color: #55CCFE; color: white; } p{ font-size: 0.2rem; }