| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 |
- <!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="msg">
- <br>
- 文本域：<textarea v-model="part"></textarea>
- <br>
- 单选框：
- <input type="radio" v-model="part1" value="1">男
- <input type="radio" v-model="part1" value="2">女
- <br>
- 多选框：
- <input v-model="part2" value="1" type="checkbox">篮球
- <input v-model="part2" value="2" type="checkbox">足球
- <input v-model="part2" value="3" type="checkbox">羽毛球
- <input v-model="part2" value="4" type="checkbox">乒乓球
- <br>
- 下拉框：
- <select v-model="part3">
- <option value="1">小学</option>
- <option value="2">初中</option>
- <option value="3">高中</option>
- <option value="4">大学</option>
- </select>
- </div>
- <script src="./vue.js"></script>
- <script>
- var app = new Vue({
- el:"#app",
- data: {
- msg:"hello world",
- part:"哈哈哈哈",
- part1: 2,
- part2: [2,3],
- part3:4
- }
- })
- </script>
- </body>
- </html>
|
