Vue 自定义单选组件

先展示样式效果

代码如下

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;
  }