vue单选框自定义样式及单选框取值问题

vue 专栏收录该内容
21 篇文章 0 订阅

首先,来看一下单选框的样式:
在这里插入图片描述

<div class="option" v-for="(option, ind) in item.surveyQuestionOptionList" :key="ind">
	<input :value="option.selectid" type="radio" :id="'option' + item.qid + option.selectid" :name="item.qid" :checked="ind == 0">
	<label :for="'option' + item.qid + option.selectid">{{option.selection}}</label>
</div>
input[type="radio"] + label{
  position: relative;
  padding-left: 1.5rem;
  padding-right: 1rem;
  width: 100%;
}
input[type="radio"] + label span{
  white-space: pre-wrap;
}
input[type="radio"] + label::after,
input[type="radio"] + label::before {
  /* content: "\a0"; 不换行空格 */
  content:"";
  display: inline-block;
  vertical-align: middle;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: .4rem;
  border-radius: 50%;
  line-height: 1.2rem; 
  padding: 0.3rem;
  background: -webkit-linear-gradient(45deg, #fff, #e1e2e4); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(45deg, #fff, #e1e2e4); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(45deg, #fff, #e1e2e4); /* Firefox 3.6 - 15 */
  background: linear-gradient(45deg, #fff, #e1e2e4);
  left: 0;
  top:0.2rem;
  position: absolute;
}
input[type="radio"]:checked + label::before {
    background: #7a4010;
    background-clip: content-box;
    padding: 0.3rem;
    z-index: 9;
}
input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

在中间遇到的问题:
默认选中
     直接在input标签上加入:checked="ind == num"num为你要默认选中的索引,但加上之后还是没有选中,后来发现是v-model的原因,你把v-model去掉,checked就有效果了

v-model 会忽略所有表单元素的 valuecheckedselected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

取值问题
     在vue中,当然要用它自带的双向绑定,那么问题来了,在
中,我们为了默认选中吧v-model去掉了,可以采用点击事件获取选中的值,但是如果在题目数量不确定的时候,你获取值,再改变值就变得比较复杂,于是我的目光又回到了v-model身上,仔细想一下上面引用,那我们的checked也用v-model好了

 <input :value="option.selectid" v-model="answerList.answers[index].answer" type="radio" :id="'option' + item.qid + option.selectid" :name="item.qid">
 // 解决问题的代码
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值