萌新VueDay4——使用v-model实现表单数据的双向绑定

萌新VueDay4——表单数据的自动收集

注意：所有form表单提交都需要name属性
后台需要根据name属性接受到提交的表单
value表示input的数据

<div id="test">
	//@submit.prevent阻止默认提交
    <form action="/xxx" @submit.prevent="handleSubmit">
        <span>用户名:</span>
        <input type="text" v-model="username"><br />
        <span>密码:</span>
        <input type="password" v-model="userpwd"><br />

		//默认值通过value值的选择
		//页面刚加载时，就已经选择男或者女的选项了，也就说有了默认值
        <span>性别:</span>
        <input type="radio" id="female" value="女" v-model="sex">
        <label for="female" > 女</label>
        <input type="radio" id="male" value="男" v-model="sex">
        <label for="male">男</label><br />


		//爱好这一项的默认值如上
        <span>爱好:</span>
        <input type="checkbox" id="basket" value="basket" v-model="hobbies">
        <label for="basket">篮球</label>
        <input type="checkbox" id="foot" value="foot" v-model="hobbies">
        <label for="foot">足球</label>
        <input type="checkbox" id="pingpang" value="pingpang" v-model="hobbies">
        <label for="pingpang">乒乓</label><br />
        
        
        //在value前加上“ ：”,将提交的id从文本变成一个表达式
        <span>城市</span>
        <select v-model="cityId">
            <option value="">未选择</option>
            <option :value="city.id" v-for="(city,index) in allcities" :key="index">{{city.name}}</option>
        </select><br />

        <span>备注</span>
        <textarea rows="10" v-model="inp"></textarea><br /> <br />
        <input type="submit" value="注册">
    </form>
</div>

<script src="../js/vue.js"></script>
<script>
    const  vm = new Vue({
        el:'#test',
        data:{
            username:'',
            userpwd:'',
            sex:'男',
            hobbies:['basket'],
            allcities:[{id:1,name:'北京'},{id:2,name:'上海'},{id:3,name:'浙江'}],
            cityId:'2',
            inp:''
        }
    })
</script>