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

发布于
2017-09-25

更新于
2017-09-26

现在用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>

vue.js javascript

阅读 4.3k

4 个回答

陌路凡歌

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>        
    <style type="text/css">

    </style>
</head>
<body>
    <div id="box">        
            <div v-for="(item, index) in items" :key="index">
                    <div class="user-sex">
                        <label><input  ref="man" type="radio" name="sex" :checked="item.val" @change="change">
                            <i></i>男</label>
                        <label><input  ref="woman" type="radio" name="sex" @change="change" :checked="!item.val">
                            <i></i>女</label>
                    </div>
       </div>
        <button @click="sub">提交</button>
    </div>
    <script src="vue.js"></script>
    <script>
        var vm = new  Vue({
            el:"#box",
            data:{                
                items:[{val:true,sex:0}]                  
            },
            methods:{
                sub:function(){
                    console.log(this.items[0].sex);  
                },
                change:function(){
                    this.items[0].sex = (!this.items[0].sex==true)?1:0;
                    
                }
                }
            
        });
    </script>
</body>

</html>