v-model radio

背景：存在多个单选框时，将所选择的单选框中的值保存下来发往后端做数据处理。

        <div id="app">
            <label for="male">
                <input type="radio" id="male" value="男" name="sex"/>男
            </label>
            <label for="female">
                <input type="radio" id="female" value="女" name="sex"/>女
            </label>            
        </div>

表单的静态效果

image.png

利用v-model实现input和数据的双向绑定，动态获取所点击的input的value

        <div id="app">
            <label for="male">
                <input type="radio" id="male" value="男" name="sex" v-model="sex"/>男
            </label>
            <label for="female">
                <input type="radio" id="female" value="女" name="sex" v-model="sex"/>女
            </label>            
            <h2>您选择的性别是：{{sex}}</h2>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const app = new Vue({
                el: '#app',
                data: {
                    sex:''
                }
            })
        </script>

image.png

没有v-model时，为了使用户只能点击其中一个选项，需要用name属性做多选的限制，name属性就像key，一次只能有一个key的数据被保存。
使用v-model以后，name属性可以不用写。

            <label for="male">
                <input type="radio" id="male" value="男" v-model="sex"/>男
            </label>
            <label for="female">
                <input type="radio" id="female" value="女" v-model="sex"/>女
            </label>