猿问

vue中怎么通过数组判断Input选中状态

现在用v-if貌似只能显示隐藏，而且也没有选中input

       <div v-for="(item, index) in Data" :key="index">

                    <div class="user-sex">

                        <label><input v-if="item.sex===1? '' : ''" ref="man" type="radio" name="sex" checked="checked">

                            <i></i>男</label>

                        <label><input v-if="item.sex===0? '' : ''" ref="woman" type="radio" name="sex">

                            <i></i>女</label>

                    </div>

       </div>


郎朗坤
浏览 1578回答 1
1回答

青春有我

<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title></title>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <style type="text/css">&nbsp; &nbsp; </style></head><body>&nbsp; &nbsp; <div id="box">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div v-for="(item, index) in items" :key="index">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="user-sex">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label><input&nbsp; ref="man" type="radio" name="sex" :checked="item.val" @change="change">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i></i>男</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label><input&nbsp; ref="woman" type="radio" name="sex" @change="change" :checked="!item.val">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i></i>女</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; <button @click="sub">提交</button>&nbsp; &nbsp; </div>&nbsp; &nbsp; <script src="vue.js"></script>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; var vm = new&nbsp; Vue({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el:"#box",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items:[{val:true,sex:0}]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; methods:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sub:function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(this.items[0].sex);&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; change:function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.items[0].sex = (!this.items[0].sex==true)?1:0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; </script></body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答