前一段时间做了一个选择答题的一个功能，需求必须的是一个问题三个选项，还必须是单选，而且只能选择一个，在实现的过程中呢，踩了不少坑，今天呢给大家分享一下。
效果呢大概实这样的：
我当时写的时候尝试过很多的方法但是距离我想要的效果还是差那么一点点，功夫不负有心人中终于给我琢磨出来了，之前一直用的点击事件v-click 但是但是我这次换成了@change="selectAlBtnR" @change事件，并且在使用两个radio 分别给他们使用两个不同的v-model赋值，选中就是这个值，不选中就为空，好了，说多了都是废话，还是直接上代码吧！
样式 (style) <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; } </style> body <body> <div id="app"> <div class="header"> <!-- 左边 --> <div class="header_left"> <p class="back"> < </p> <p>返回</p> </div> <div class="header_middle"> <p class="cent-size">商品列表</p> </div> </div> <div class="main"> <ul> <li v-for="(item,index) in list" :key="index"> <div class="head-title"> <span>{{index+1}}.{{item.title}}</span> </div> <div class="mai-list" v-for="(v,i) in item.option"> <label @change="selectAlBtnR" v-if="item.type == '1'"> <input v-if="index==1" :name="v.id" class="radions" type="radio" :value="v.id" v-model="str" /> <input v-else :name="v.id" class="radions" type="radio" :value="v.id" v-model="str2" /> </label> <label v-else><input class="radions" @click="selectAlBtnC(v)" type="checkbox"></label> <span class="cent">{{v.zm}}</span> <span class="cent">{{v.optionName}}</span> </div> </li> </ul> </div> <div class="btn" @click="saveInfo"> <span>提 交</span> </div> </div> </body> script <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> (function (desingnWindth, n) { function getRem() { var html = document.getElementsByTagName('html')[0]; var deviceWidth = document.body.clientWidth || document.documentElement.clientWidth; var rem = deviceWidth / desingnWindth * n; console.log(rem); html.style.fontSize = rem + 'px'; } getRem(); window.addEventListener('resize', function () { getRem(); }) })(750, 100); </script> <script> var vm = new Vue({ el: "#app", data: { list: [ // 这是我自己模拟的数据结构 { type: "1", title: "吃饭了没有", option: [ { id: "001", optionName: "吃了", isStatus: "2", zm: "A" }, { id: "002", optionName: "没呢", isStatus: "2", zm: "B" }, { id: "03", optionName: "等你请客嘞", isStatus: "2", zm: "C" } ] }, { type: "1", title: "你有女朋友吗？", option: [ { id: "004", optionName: "有", isStatus: "2", zm: "A" }, { id: "005", optionName: "没有", isStatus: "2", zm: "B" }, { id: "06", optionName: "还是一只单生狗", isStatus: "2", zm: "C" } ] } ], listData: [], str: '', // 选中 str2: ''// 未选中 }, created() {}, methods: { selectAlBtnR(e) { console.log("选中的数据", e) this.listData = { id: this.str2, id2: this.str } }， // 提交 saveInfo() { let data = { id: this.listData } console.log("提交以后的数据======>", data); } } }) </script>