lovecoding
/
web0331


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        表单标签:
            输入框 下拉框 文本域 多选框 单选框
    -->
    <div id="app">
       输入框:<input type="text" v-model="part1">
       <br>
       下拉框：
        <select v-model="part2">
            <option value="1">小学</option>
            <option value="2">初中</option>
            <option value="3">高中</option>
            <option value="4">大学</option>
        </select>
        <br>
        <textarea v-model="part3"></textarea>
        <br>
        <input v-model="part4" value="1" type="checkbox">足球
        <input v-model="part4" value="2" type="checkbox">台球
        <input v-model="part4" value="3" type="checkbox">羽毛球
        <input v-model="part4" value="4" type="checkbox">网球
        <input v-model="part4" value="5" type="checkbox">蓝球
        <input v-model="part4" value="6" type="checkbox">乒乓球
        <br>
        <input type="radio" v-model="part5" value="1">男
        <input type="radio" v-model="part5" value="2">女
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                part1:"111",
                part2:"2",
                part3:"你好",
                part4:["2","3"],
                part5:"2"
            }
        })
    </script>
</body>
</html>