form表单的在Vue中的数据双向绑定

v-model用于数据的双向绑定
<body>
    <form action="">
        <div id="demo">
            用户名（文本）： <input type="text" name="user" v-model="user"><br><br>
            性别（单选）：
            <input type="radio" name="sale" value="0" v-model="sex">男
            <input type="radio" name="sale" value="1" v-model="sex">女<br><br>
            技能（多选）：
            <input type="checkbox" name="skill" value="1" v-model="skills"> Jave开发
            <input type="checkbox" name="skill" value="2" v-model="skills"> Vue开发
            <input type="checkbox" name="skill" value="3" v-model="skills"> PHP开发<br><br>
            城市：（下拉框）
            <select name="city" v-model="city">          //下拉框的v-model写在select标签内，获取的是option内的value值
                <option :value="v.code" v-for="(v,index) in citys " :key="index">{{v.name}}</option>
            </select><br><br>
            说明：（多行文本）
            <textarea name="desc" cols="30" rows="10" v-model="desc"></textarea><br><br>

            <input type="submit" value="提交"><br><br>
    </form>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#demo",
            data: {
                user: "",
                sex: "",
                skills: [], //多选框的属性值是数组
                citys: [   //下拉框的属性值是数组
                {code: 'bj', name: '北京' }, 
                { code: 'sh', name: '上海' }, 
                { code: 'gz', name: '广州' }, 
                { code: 'sz', name: '深圳' } 
                ], 
                city: "",
                desc: "" },
                 methods: { }
                 })
                </script> 
                </body>
form表单的在Vue中的数据双向绑定

猜你喜欢
