radio做选择题的单选功能 |
您所在的位置：网站首页 › 选择题二选一必选错是什么情况 › radio做选择题的单选功能 |
radio做选择题的单选功能
|
radio做选择题的单选功能
前一段时间做了一个选择答题的一个功能，需求必须的是一个问题三个选项，还必须是单选，而且只能选择一个，在实现的过程中呢，踩了不少坑，今天呢给大家分享一下。 效果呢大概实这样的：
我当时写的时候尝试过很多的方法但是距离我想要的效果还是差那么一点点，功夫不负有心人中终于给我琢磨出来了，之前一直用的点击事件v-click 但是但是我这次换成了@change="selectAlBtnR" @change事件，并且在使用两个radio 分别给他们使用两个不同的v-model赋值，选中就是这个值，不选中就为空，好了，说多了都是废话，还是直接上代码吧！ 样式 (style) * { margin: 0; padding: 0; list-style: none; } html, body, #app {font-size: 0.4rem;} .header { width: 100%; height: 1rem; background: #fff; display: flex; border-bottom: 1px solid #EFF0F0; padding-left: 0.6em; z-index: 999; display: flex; align-items: center; position: fixed; left: 0; top: 0; z-index: 999; overflow: scroll; } #app .header .header_left { width: 20%; display: inline-block; font-size: 0.3rem; display: flex; } .header_middle { width: 100%; height: 100%; margin-left: 2.2rem; line-height: 1rem; } .header_right { font-size: 1/32*26em; padding-right: 1.2em; } .main { margin-top: 1.3rem; } .cent { width: 100%; height: 0.9rem; } .radions {width: 0.4rem; height: 0.4rem; } .btn { width: 6rem; height: 1rem; background-color: blue; box-shadow: 1px 4px 24px 0px rgba(16, 132, 241, 0.3); border-radius: 45px; background: linear-gradient(90deg, #0C82F1 0%, #4CA8FC 100%); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto; margin-top: 6rem; } body |
【本文地址】
今日新闻 |
推荐新闻 |