vue表单

1.1.1表单基本操作

单选框如何实现单选？

1、 两个单选框需要同时通过v-model 双向绑定 一个值

2、 每一个单选框必须要有value属性  且value 值不能一样

3、 当某一个单选框选中的时候 v-model  会将当前的 value值 改变 data 中的 数据

实现代码

 <div id="app">
        <div>
            <label for="">性别</label>
            <input type="radio" name="sex" id="" value="男" v-model="sex">男
            <input type="radio" name="sex" id="" value="女" v-model="sex">女
        </div>
    </div>

<script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   sex:''
                }

            },
            methods:{
               

            }
        })
    </script>

预览：

复选框如何实现复选

1、 复选框需要同时通过v-model 双向绑定 一个值

2、 每一个复选框必须要有value属性  且value 值不能一样

3、 当某一个复选框，选中内容的时候 v-model  会将当前的 value值 ，并且同时改变 data数据中心 中的 数据

<div id="app">
        <div>
            <label for="">爱好</label>
            <input type="checkbox" name="hobby[]" id="" value="阅读" v-model="hobby">阅读
            <input type="checkbox" name="hobby[]" id="" value="登山" v-model="hobby">登山
            <input type="checkbox" name="hobby[]" id="" value="旅游" v-model="hobby">旅游
            <input type="checkbox" name="hobby[]" id="" value="打球" v-model="hobby">打球
        </div>
        <div>
            你的爱好是:
            <span v-for="item in hobby">{{item}}&emsp;</span>
        </div>
    </div>

预览：