温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue中radio根据动态值绑定checked无效怎么办

发布时间:2022-03-31 14:46:28 来源:亿速云 阅读:523 作者:小新 栏目:开发技术

这篇文章主要介绍vue中radio根据动态值绑定checked无效怎么办,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

    1.问题分析

    在vue之前,我们想要获取某一组(设置相同的name属性)radio的选中状态是通过name属性获取,判断input的checked是true还是false,但是当列表中有多组(动态获取)就显得很乏力;vue出现后我们可以通过v-model很巧妙的完成。

    2.vue中分析(完成代码请看后面)

    <input :name="item.COLUMN_CODE" :type="item.COLUMN_TYPE" v-model="item1.ISSELECT" value="true" :checked="item1.ISSELECT" :disabled="isAnswer" class="tui-checkbox">

    我们将name绑定COLUMN_CODE设置为同一组radio或checkbox;v-model绑定返回的值ISSELECT(true/false),value=&lsquo;true&rsquo;表示当ISSELECT的值为true是该radio或checkbox就自动选中,同理,当我们选中某一项时对应的ISSELECT自动切换成true。

    vue官网描述的是无需设置name,但是我在项目中测试过是通不过的,因为还是无法识别是同一组还是不同组,所以建议读者 加上。

    3.完成代码(该例子中input是自定义的样式)

    1)json数据

    {
    	"THEME_STATUE": "1",
    	"back_type": null,
    	"THEME_CODE": "1495077293228",
    	"THEME_NAME": "新款工作服样式调查问卷",
    	"POLL_TYPE_DESC": "投票问卷(选择答题)",
    	"POLL_TYPE": "B",
    	"THEME_CONTENT": "关于新款工作服样式评价的投票通知各位职工朋友:今年,公司工作服已到新一轮采购周期。为提高职工对工作服的满意度,展示职工良好形象,安全管理部与工会一同对职工的意见反馈进行了收集,并组织职工代表对新款样衣进行了初评。现请广大职工朋友根据图样展示,评选心目中最佳的春、夏和冬装棉服款式。我们将根据大家投票结果定款。安全管理部、工会2017年5月15日",
    	"ANSWER_MODE": "",
    	"POLL_MULT_NUM": "",
    	"POLL_SINGLE_NUM": "",
    	"MAX_POLL_NUM": "",
    	"POLL_SINGLE_SCORE": 0,
    	"POLL_MULT_SCORE": 0,
    	"BGIMG": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=a3d249fa8e3d72b9",
    	"SCORE_STATUS": "",
    	"SCORE_RESULT": "",
    	"CREATE_DATE": "2017-05-31",
    	"END_DATE": "2019-10-30",
    	"ISANSWER": false,
    	"COLUMN_LIST": [{
    		"COLUMN_CODE": "181",
    		"COLUMN_NAME": "1、您所在的工作单位",
    		"COLUMN_TYPE": "radio",
    		"COLUMN_CONTENT": "",
    		"ISSELECT": false,
    		"OPTION_LIST": [{
    			"OPTION_CODE": "191",
    			"OPTION_NAME": "A、厂 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "192",
    			"OPTION_NAME": "B、烟厂 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "193",
    			"OPTION_NAME": "C、湖北 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "194",
    			"OPTION_NAME": "D、中国 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "195",
    			"OPTION_NAME": "E、大大 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "196",
    			"OPTION_NAME": "F、小小",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "197",
    			"OPTION_NAME": "G、卷烟材料厂 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "198",
    			"OPTION_NAME": "H、新业薄片公司 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}]
    	}, {
    		"COLUMN_CODE": "142",
    		"COLUMN_NAME": "2、您所在的工作区域",
    		"COLUMN_TYPE": "radio",
    		"COLUMN_CONTENT": "",
    		"ISSELECT": false,
    		"OPTION_LIST": [{
    			"OPTION_CODE": "61",
    			"OPTION_NAME": "A、卷包车间 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "radio",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "62",
    			"OPTION_NAME": "B、制丝车间 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "radio",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "63",
    			"OPTION_NAME": "C、动力车间 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "radio",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "64",
    			"OPTION_NAME": "D、仓储、物流 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "radio",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "65",
    			"OPTION_NAME": "E、其他 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "text",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}]
    	}, {
    		"COLUMN_CODE": "143",
    		"COLUMN_NAME": "3、您所在的工作岗位",
    		"COLUMN_TYPE": "radio",
    		"COLUMN_CONTENT": "",
    		"ISSELECT": false,
    		"OPTION_LIST": [{
    			"OPTION_CODE": "66",
    			"OPTION_NAME": "A、操作工 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "67",
    			"OPTION_NAME": "B、维修工 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "68",
    			"OPTION_NAME": "C、辅助工 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "69",
    			"OPTION_NAME": "D、管理人员 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "70",
    			"OPTION_NAME": "E、其他 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "text",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}]
    	}, {
    		"COLUMN_CODE": "144",
    		"COLUMN_NAME": "4、您心目中最佳的春、夏款式是",
    		"COLUMN_TYPE": "radio",
    		"COLUMN_CONTENT": "",
    		"ISSELECT": false,
    		"OPTION_LIST": [{
    			"OPTION_CODE": "71",
    			"OPTION_NAME": "A、春、夏款款式一 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "imagelist",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=8f4e214b53e4cfce",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "190",
    			"OPTION_NAME": "B、春、夏款款式二",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "imagelist",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=927308324fa1f0fa",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "72",
    			"OPTION_NAME": "C、春、夏款款式三",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "imagelist",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=be74770291a746f3",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "73",
    			"OPTION_NAME": "D、春、夏款款式四",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "imagelist",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=8828122cb5818a04",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "74",
    			"OPTION_NAME": "E、春、夏款款式五",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "imagelist",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=a746a3bbb7d55e3b",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "75",
    			"OPTION_NAME": "F、现发放款式",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}]
    	}, {
    		"COLUMN_CODE": "145",
    		"COLUMN_NAME": "5、您心目中最佳的冬装棉服款式是",
    		"COLUMN_TYPE": "radio",
    		"COLUMN_CONTENT": "",
    		"ISSELECT": false,
    		"OPTION_LIST": [{
    			"OPTION_CODE": "76",
    			"OPTION_NAME": "A、冬装棉服款式一 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "imagelist",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=b39968d6d0b7446e",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "77",
    			"OPTION_NAME": "B、冬装棉服款式二",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "imagelist",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=a55d3e9b0a49ae8d",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}]
    	}, {
    		"COLUMN_CODE": "146",
    		"COLUMN_NAME": "6、在您选中的款式中,需要改进的细节 ",
    		"COLUMN_TYPE": "radio",
    		"COLUMN_CONTENT": "",
    		"ISSELECT": false,
    		"OPTION_LIST": [{
    			"OPTION_CODE": "78",
    			"OPTION_NAME": "A、工牌悬挂配饰",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "79",
    			"OPTION_NAME": "B、裤装口袋",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "80",
    			"OPTION_NAME": "C、夹克口袋 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}, {
    			"OPTION_CODE": "81",
    			"OPTION_NAME": "D、衣扣 ",
    			"OPTION_HREF": "",
    			"OPTION_TYPE": "",
    			"OPTION_CONTENT": "",
    			"EMC_URL": "",
    			"OPTION_ANSWER": "0",
    			"POLLNUM": 0,
    			"ISSELECT": false
    		}]
    	}, {
    		"COLUMN_CODE": "147",
    		"COLUMN_NAME": "7、您对选中样衣的其他建议",
    		"COLUMN_TYPE": "text",
    		"COLUMN_CONTENT": "",
    		"ISSELECT": false,
    		"OPTION_LIST": []
    	}],
    	"success": "1"
    }

    2)html代码

    <div class="select-item" v-if="voteType == 'A' || voteType == 'B'" :key="index" v-for="(item, index) in detailList">
        <div class="family select-item-title" :attr="item.COLUMN_CODE" v-if="item.COLUMN_TYPE == 'radio'" v-html="item.COLUMN_NAME + '(单选)'"></div>
         <div class="family select-item-title" :attr="item.COLUMN_CODE" v-else-if="item.COLUMN_TYPE == 'checkbox'" v-html="item.COLUMN_NAME + '(多选)'"></div>
         <div class="family select-item-title" :attr="item.COLUMN_CODE" v-else v-html="item.COLUMN_NAME"></div>
         <div class="option-con" v-if="item.COLUMN_TYPE != 'text'" :key="index1" v-for="(item1, index1) in item.OPTION_LIST">
           <div class="option-con-row" v-if="item1.OPTION_TYPE != 'text'">
             <input :name="item.COLUMN_CODE" :type="item.COLUMN_TYPE" v-model="item1.ISSELECT" value="true" :checked="item1.ISSELECT" :disabled="isAnswer" class="tui-checkbox">
             <div class="family option-desc">{{item1.OPTION_NAME}}</div>
           </div>
           <div class="text-area-con" v-else>
             <div class="option-con-row">
               <input :name="item.COLUMN_CODE" :type="item.COLUMN_TYPE" v-model="item1.ISSELECT" value="true" :checked="item1.ISSELECT" :disabled="isAnswer" class="tui-checkbox">
               <div class="family option-desc">{{item1.OPTION_NAME}}</div>
             </div>
             <textarea class="text-area" rows="3" v-model="item1.OPTION_CONTENT" :readonly="isAnswer"></textarea>
           </div>
           <img class="option-con-img" v-if="item1.EMC_URL" :src="item1.EMC_URL">
         </div>
         <div class="option-con" v-if="item.COLUMN_TYPE == 'text'">
           <div class="text-area-con">
             <textarea class="text-area" rows="3" v-model="item.COLUMN_CONTENT" :readonly="isAnswer"></textarea>
           </div>
         </div>
       </div>

    3)css样式

    	/*radio或checked的样式:*/
    	.checkbox-list-con .mint-msgbox-message{
    	  line-height: 20px;
    	}
    	.checkbox-list-con span {
    	  position: relative;
    	  margin-right: 15px;
    	}
    	.checkbox-list-con .Checkbox {
    	  position: absolute;
    	  visibility: hidden;
    	}
    	.checkbox-list-con .Checkbox+label {
    	  position:absolute;
    	  width: 16px;
    	  height: 16px;
    	  border: 1px solid #A6A6A6;
    	  border-radius: 50%;
    	  background-color:#ffffff;
    	}
    	.checkbox-list-con .Checkbox:checked+label:after {
    	  content: "";
    	  position: absolute;
    	  left: 2px;
    	  top:2px;
    	  width: 9px;
    	  height: 4px;
    	  border: 2px solid #00b7ee;
    	  border-top-color: transparent;
    	  border-right-color: transparent;
    	  transform: rotate(-45deg);
    	  -ms-transform: rotate(-60deg);
    	  -moz-transform: rotate(-60deg);
    	  -webkit-transform: rotate(-60deg);
    	}
    	
    	.checkbox-list{
    	  display: flex;
    	  flex-direction: row;
    	  margin-bottom: 5px;
    	  align-items: center;
    	  line-height: 20px;
    	}
    	.checkbox-list-con{
    	  display: flex;
    	  flex-direction: column;
    	  padding: 10px 20px;
    	}
    	/*自定义checkbox*/
    	
    	.tui-checkbox:checked {
    	  background:#1673ff
    	}
    	.tui-checkbox {
    	  width:25px;
    	  height:25px;
    	  background-color:#ffffff;
    	  border:solid 1px #dddddd;
    	  -webkit-border-radius:50%;
    	  border-radius:50%;
    	  font-size:0.8rem;
    	  margin:0;
    	  padding:0;
    	  position:relative;
    	  display:inline-block;
    	  vertical-align:top;
    	  cursor:default;
    	  -webkit-appearance:none;
    	  -webkit-user-select:none;
    	  user-select:none;
    	  -webkit-transition:background-color ease 0.1s;
    	  transition:background-color ease 0.1s;
    	}
    	.tui-checkbox:checked::after {
    	  content:'';
    	  top:5px;
    	  left:5px;
    	  position:absolute;
    	  background:transparent;
    	  border:#fff solid 2px;
    	  border-top:none;
    	  border-right:none;
    	  height:6px;
    	  width:10px;
    	  -moz-transform:rotate(-45deg);
    	  -ms-transform:rotate(-45deg);
    	  -webkit-transform:rotate(-45deg);
    	  transform:rotate(-45deg);
    	}
    	
    	/*其他样式*/
    	.score-result{
    	   font-size: 16px;
    	   font-weight: 600!important;
    	   color: #2E8B57;
    	   width: calc(100% - 40px);
    	   padding: 10px 20px;
    	   line-height: 20px;
    	   background: #ffffff;
    	 }
    	 .text-area-con{
    	   width: 100%;
    	 }
    	 .text-area{
    	   width: calc(100% - 10px);
    	   /*height: 80px;*/
    	   padding: 5px;
    	   outline: none;
    	   resize: none;
    	   font-size: 15px;
    	   font-weight: 500;
    	   color: #333333;
    	   font-family: "Microsoft YaHei";
    	   border: 1px solid #888888;
    	 }
    	 .appointment-btn {
    	   position: relative!important;
    	   font-size: 18px;
    	   color: #ffffff;
    	   text-align: center;
    	   line-height: 44px;
    	   height: 44px;
    	   border-top: 1px solid #f2f2f2;
    	   background: #366CB3;
    	   width: calc(100% - 32px);
    	   margin: 0px 0px 15px 16px;
    	   border-radius: 3px;
    	   letter-spacing: 4px;
    	 }
    	 .option-desc{
    	   font-size: 15px;
    	   margin-left: 20px;
    	   width: calc(100% - 45px);
    	   text-align: justify;
    	   line-height: 24px;
    	 }
    	 .option-desc1{
    	   font-size: 15px;
    	   margin-left: 20px;
    	   width: calc(100% - 45px);
    	   text-align: justify;
    	   line-height: 24px;
    	   color: #F0686E;
    	 }
    	 .option-con-img{
    	   width: calc(100% - 90px);
    	   height: 140px;
    	   margin-left: 45px;
    	 }
    	 .option-con-row{
    	   display: flex;
    	   align-items: center;
    	   width: 100%;
    	   padding: 10px 0px;
    	 }
    	 .option-con{
    	   display: flex;
    	   flex-direction: column;
    	   align-items: flex-start;
    	   width: calc(100% - 40px);
    	   padding: 10px 20px;
    	   border-top: 1px solid #efefef;
    	 }
    	 .select-item-title{
    	   width: calc(100% - 40px);
    	   padding: 10px 20px;
    	   color: #4682B4;
    	   text-align: justify;
    	   font-size: 15px;
    	   line-height: 24px;
    	 }
    	 .select-item{
    	   display: flex;
    	   flex-direction: column;
    	   margin-bottom: 15px;
    	   background: #ffffff;
    	 }
    	 .bottom-con{
    	   display: flex;
    	   flex-direction: column;
    	   width: 100%;
    	   background: #f2f2f2;
    	 }
    	 .top-four-img{
    	   width: 16px;
    	   height: 16px;
    	 }
    	 .top-four-title{
    	   color: #434343;
    	   font-size: 16px;
    	   margin-right: 5px;
    	 }
    	 .top-four{
    	   display: flex;
    	   justify-content: center;
    	   align-items: center;
    	   background: #ffffff;
    	   width: 100%;
    	   padding: 15px 0px;
    	 }
    	 .top-three-content{
    	   color: #333333;
    	   font-size: 15px;
    	   line-height: 28px;
    	   text-indent:2em;
    	   text-align: justify;
    	 }
    	 .top-three-desc{
    	   color: #4682B4;
    	   font-size: 15px;
    	   line-height: 28px;
    	   text-indent:2em;
    	 }
    	 .top-three{
    	   width: calc(100% - 40px);
    	   padding: 15px 20px 0px 20px;
    	   background: #ffffff;
    	   overflow: hidden;
    	   text-overflow: ellipsis;
    	   display: -webkit-box;
    	   -webkit-line-clamp: 3;
    	   -webkit-box-orient: vertical;
    	 }
    	 .top-three1{
    	   width: calc(100% - 40px);
    	   padding: 15px 20px 15px 20px;
    	   background: #ffffff;
    	 }
    	 .top-two-time{
    	   width: 100%;
    	   text-align: center;
    	   font-size: 13px;
    	   color: #999999;
    	   margin-bottom: 10px;
    	 }
    	 .top-two-title{
    	   font-size: 18px;
    	   color: 	#4682B4;
    	   text-align: center;
    	   width: 100%;
    	   margin-bottom: 10px;
    	   line-height: 24px;
    	 }
    	 .top-one>img{
    	   height: 100%;
    	   width: 100%;
    	 }
    	 .top-two{
    	   width: calc(100% - 40px);
    	   background: #ffffff;
    	   padding:0px 20px;
    	   border-bottom: 1px solid #efefef;
    	 }
    	 .top-one{
    	   height: 100px;
    	   width: 100%;
    	 }
    	 .top-con{
    	   display: flex;
    	   flex-direction: column;
    	   justify-content: center;
    	   align-items: center;
    	   width: 100%;
    	   margin-bottom: 15px;
    	 }
    	 .wrapper {
    	   width: 100%;
    	   height: 100%;
    	   /*height: calc(100% - 70px);*/
    	   overflow: auto;
    	   background: #f2f2f2;
    	   -webkit-overflow-scrolling: touch;
    	 }
    	 .container {
    	   height: 100%;
    	   background-color: #f2f2f2;
    	   display: flex;
    	   flex-direction: column;
    	 }

    4.效果图

    vue中radio根据动态值绑定checked无效怎么办

    以上是“vue中radio根据动态值绑定checked无效怎么办”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI