|
|
@@ -0,0 +1,49 @@
|
|
|
+<!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>
|
e