diff --git "a/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/.keep" "b/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/.keep"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/01.html" "b/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..924d34d74ebaad4b741800a0147d6bf416147867
--- /dev/null
+++ "b/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/01.html"
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.min.js"></script>
+</head>
+<body>
+    <div id="app">
+        <div>
+            <input type="text" v-model = "value">
+            <button @click = "add">添加</button>
+        </div>
+        <div>
+            <ul>
+                <li v-for="l in list">{{l}}</li>
+            </ul>
+        </div>
+    </div>
+    <script>
+       new Vue({
+            el:"#app",
+            data:{
+                value:'',
+                list:[]
+            },
+            methods:{
+                add(){
+                    this.list.push(this.value)
+                    this.value = ""
+                }
+            }
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/02.html" "b/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/02.html"
new file mode 100644
index 0000000000000000000000000000000000000000..32d931e8bda06793adee8901fa0b6a52ed8e6c2c
--- /dev/null
+++ "b/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/02.html"
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.min.js"></script>
+</head>
+<body>
+    <div id="app">
+		<img :src="path" alt="美景" width="800px" @mouseover="mouseover" @mouseout="mouseout" />
+	</div>
+	
+	<script type="text/javascript">
+		const app = new Vue({
+			el: "#app",
+			data: {
+				path: 'img/1.jpg'
+			},
+			methods: {
+				mouseover(event) {
+					event.target.style.opacity = 0.5,
+					this.path = 'img/2.jpg'
+				},
+				mouseout(event) {
+					event.target.style.opacity = 1,
+					this.path = 'img/1.jpg'
+				}
+			}
+		})
+	</script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/03.html" "b/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/03.html"
new file mode 100644
index 0000000000000000000000000000000000000000..e7962aea67c3654052bc5b855fa7e1d764a9cf38
--- /dev/null
+++ "b/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/03.html"
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.min.js"></script>
+</head>
+<body>
+    <div id="root">
+          <h1>{{num}}</h1>
+            <button v-on:click="num++">点击增加</button>
+            <button @click="num++">点击增加</button>
+    </div>
+    <script>
+        new Vue({
+            el:"#root",
+            data:{
+                num:0
+            },
+            methods:{
+                add(){
+                    this.num++
+                }
+            }
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/04.html" "b/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/04.html"
new file mode 100644
index 0000000000000000000000000000000000000000..df18f6c13634a97033d2fc18519fc637fe091221
--- /dev/null
+++ "b/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/04.html"
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.min.js"></script>
+</head>
+<body>
+   <div id="root">
+    <!-- <p>{{name}}</p>
+    <p v-text="'我是'+name">我来自福建</p>
+    <p v-html="html"></p> -->
+
+    <!-- <p v-if="num>=10">你可以看到吗</p> -->
+    <h1 v-if="num==1">当num=1时,你可以看到我</h1>
+    <h2 v-else-if="num==2">当num=3时,你可以看到我</h2>
+    <h3 v-else-if="num==3">当num=1时,你可以看到我</h3>
+    <h4 v-else="num==4">当num不等于123时,你可以看到我</h4>
+    <button @click="num++">点我</button>{{name}}
+   </div>
+   <script>
+    new root =new Vue({
+        el:"#root",
+        data:{
+            name:"张三",
+            html:"haha",
+            isShow:true,
+            num:0
+        }
+    })
+   </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/05.html" "b/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/05.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c32969bd47b6eef05cccc77ed1e353ba6e3aba8c
--- /dev/null
+++ "b/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/05.html"
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.min.js"></script>
+</head>
+<body>
+    <div id="app">
+        请输入张三的成绩：<input type="text" v-model="va" v-on:click="add"  v-on:keyup.enter="submit">
+        <h2 v-if="num>=90">张三的成绩优秀</h2>
+        <h2 v-else-if="num>=75&&num<90">张三的成绩良好</h2>
+        <h2 v-else-if="num>=60&&num<75">张三的成绩及格</h2>
+        <h2 v-else="num<60">张三的成绩不及格</h2>
+    </div>
+    <script>
+        new Vue({
+            el:"#app",
+            data:{
+                num:0,
+                va:""
+
+            },
+            methods:{
+                add(){
+                this.num++
+            },
+            submit(){
+                this.num=this.va
+            }
+            }
+            
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/06.html" "b/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/06.html"
new file mode 100644
index 0000000000000000000000000000000000000000..502114437eb82867a218fd1c7047b7a2d10a7c86
--- /dev/null
+++ "b/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/06.html"
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.min.js"></script>
+</head>
+<body>
+    <div>
+        <img src="img/1.jpg" alt="">
+        <button v-on>点击我切换图片</button>
+    </div>
+    
+</body>
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/.keep" "b/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/.keep"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/\344\275\234\344\270\2321.html" "b/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/\344\275\234\344\270\2321.html"
new file mode 100644
index 0000000000000000000000000000000000000000..33379ffc03a2a01bed1d3ccfb18c1efb4a0fddf8
--- /dev/null
+++ "b/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/\344\275\234\344\270\2321.html"
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title></title>
+    <script src="./js/vue.js"></script>
+</head>
+<body>
+    <div class="app">
+        <input v-focus-bind type="text">
+    </div>
+    <script>
+        Vue.directive('focus-bind', (el, binding) =>
+         {
+            setTimeout(()=>{
+                el.focus()
+            },0)
+          })
+        const app = new Vue({
+          el: '.app',
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/\344\275\234\344\270\2322.html" "b/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/\344\275\234\344\270\2322.html"
new file mode 100644
index 0000000000000000000000000000000000000000..7e7d07ae659475c9b38eccdf704998bb970d953e
--- /dev/null
+++ "b/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/\344\275\234\344\270\2322.html"
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title></title>
+    <script src="./js/vue.js"></script>
+</head>
+<body>
+    <div class="app">
+        <input type="text" v-fk_modul.trim="msg" />
+        <button @click="msg='GJY'">创建Msg</button>
+        <h2>msg:{{msg}}</h2>
+      </div>
+      <script>
+        Vue.directive('fk_modul', (el, binding, vnode) => {
+          binding.eve = 'input'
+          if (binding.modifiers.trim) {
+              el.addEventListener(binding.eve, function () {
+                vnode.context[binding.expression] = el.value.trim()
+              })
+              el.value = binding.value.trim()
+          }else{
+              el.addEventListener(binding.eve, function () {
+                vnode.context[binding.expression] = el.value
+              })
+              el.value = binding.value
+          }
+          
+        })
+        const app = new Vue({
+          el: '.app',
+          data: {
+            msg: '',
+          }
+        })
+      </script>
+      
+</body>
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/\344\275\234\344\270\2323.html" "b/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/\344\275\234\344\270\2323.html"
new file mode 100644
index 0000000000000000000000000000000000000000..1777e4b8b270fd0bf349fc2dbe02280edc858cf3
--- /dev/null
+++ "b/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/\344\275\234\344\270\2323.html"
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title></title>
+    <script src="./js/vue.js"></script>
+</head>
+
+<body>
+    <div class="app">
+        <h2>{{count}}</h2>
+        <button v-fk_click:click="countAdd">点击加1</button>
+    </div>
+    <script>
+        Vue.directive('fk_click', function(el, binding){
+            if (binding.arg === 'click') {
+              el.onclick = (e)=> {
+                vnode.context[binding.expression]()
+              }
+            }
+          })
+        const app = new Vue({
+          el: '.app',
+          data: {
+            count:1
+          },
+          methods: {
+            countAdd() {
+              this.count++;
+            },
+          },
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/.keep" "b/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/.keep"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/index1.html" "b/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/index1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..dddd294ff9a8e83eab5d26cb3130536b636873b6
--- /dev/null
+++ "b/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/index1.html"
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>人民币美元转换</title>
+  <script src="https://cdn.jsdelivr.net/npm/vue@3.2.38/dist/vue.global.min.js"></script>
+  <style>
+  </style>
+</head>
+
+<body>
+  <div id="app">
+    <div>￥: <input type="number" v-model="cny"></div>
+    <div>＄: <input type="text" v-model="dollar"></div>
+    <p>{{cny}}人民币 = {{dollar.toFixed(2)}} 美元</p>
+
+  </div>
+</body>
+<script>
+  Vue.createApp({
+    data() {
+      return {
+        cny: 0,
+        dollar: 0
+      }
+    },
+    watch: {
+      cny(newValue, oldValue) {
+        this.dollar = this.cny * 0.14237019
+      }
+    },
+  }).mount('#app')
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/index2.html" "b/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/index2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..ed5c1c01fa1d4ab91b0714008f76dd0f974de2d8
--- /dev/null
+++ "b/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/index2.html"
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>购物车</title>
+  <script src="https://cdn.jsdelivr.net/npm/vue@3.2.38/dist/vue.global.min.js"></script>
+  <style>
+    table {
+      border-collapse: collapse;
+    }
+
+    th,
+    td {
+      width: 80px;
+      padding: 6px;
+      text-align: center;
+
+    }
+
+    input {
+      width: 80px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app">
+    <button @click="showAddBtn">添加</button>
+
+    <table border>
+      <tr>
+        <th>id</th>
+        <th>商品名称</th>
+        <th>商品价格</th>
+        <th>商品数量</th>
+        <th>操作</th>
+      </tr>
+
+      <template v-for="(item,index) in dataList" :key="item.id">
+        <tr>
+          <td>{{item.id}}</td>
+          <td>{{item.name}}</td>
+          <td>{{item.price}}</td>
+          <td>
+            <button :disabled="item.num >0 ? false : true" @click="sub(index)">-</button>
+            {{item.num}}
+            <button @click="add(index)">+</button></button>
+          </td>
+          <td><button @click="remove(index)">移除</button></td>
+        </tr>
+      </template>
+      <tr v-if="showAdd">
+        <td><input type="text" v-model="newGoods.id"></td>
+        <td><input type="text" v-model="newGoods.name"></td>
+        <td><input type="number" v-model="newGoods.price"></td>
+        <td><input type="number" v-model="newGoods.num"></td>
+        <td><button @click="increase">确定</button></td>
+      </tr>
+    </table>
+    <h1>总价格：￥{{allPrice.toFixed(2)}}</h1>
+  </div>
+</body>
+<script>
+  Vue.createApp({
+    computed: {
+      allPrice() {
+        let sum = 0
+        for (let i = 0; i < this.dataList.length; i++) {
+          sum += this.dataList[i].price * this.dataList[i].num
+        }
+        return sum
+      }
+    },
+    data() {
+      return {
+        showAdd: false,
+        dataList: [{
+          id: 1,
+          name: '充电宝',
+          price: '99.9',
+          num: 1,
+        }, {
+          id: 2,
+          name: '小风扇',
+          price: '49.9',
+          num: 1,
+        }, {
+          id: 3,
+          name: '小音箱',
+          price: '129.9',
+          num: 1,
+        }, {
+          id: 4,
+          name: '蓝牙耳机',
+          price: '499',
+          num: 1,
+        }],
+        newGoods: {
+          id: '',
+          name: '',
+          price: '',
+          num: '',
+        }
+      }
+    },
+    methods: {
+      sub(index) {
+        this.dataList[index].num--
+      },
+      add(index) {
+        this.dataList[index].num++
+      },
+      showAddBtn(index) {
+        this.showAdd = !this.showAdd
+      },
+      remove(index) {
+        this.dataList.splice(index, 1)
+      },
+      increase() {
+        this.dataList.push(this.newGoods)
+        this.newGoods = {}
+      }
+    },
+  }).mount('#app')
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\345\205\255\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/.keep" "b/\347\254\254\345\205\255\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/.keep"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\347\254\254\345\205\255\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/index.html" "b/\347\254\254\345\205\255\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..68674b5a07c32e344a6df7d47c65b3b478d88fe7
--- /dev/null
+++ "b/\347\254\254\345\205\255\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340802\346\233\276\346\231\223\344\270\234/index.html"
@@ -0,0 +1,124 @@
+<!--
+ * @Description: 
+ * @Author: Chen bi
+ * @Date: 2022-09-23 10:57:11
+ * @LastEditTime: 2022-09-23 12:37:43
+ * @LastEditors: Chen bi
+-->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="vue.js"></script>
+    <style>
+        #app>div {
+            margin: 20px;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <div>
+            <span>姓名:</span>
+            <input type="text" v-model="form.name">
+        </div>
+        <div>
+            <span>性别:</span>
+            <input type="radio" name="sex" v-model="form.sex" id="" value="male"> 男
+            <input type="radio" name="sex" v-model="form.sex" id="" value="female">女
+        </div>
+        <div>
+            <span>爱好:</span>
+            <input type="checkbox" name="hobby" id="" v-model="form.hobby" value="Basketball" />篮球
+            <input type="checkbox" name="hobby" id="" v-model="form.hobby" value="singing" />唱歌
+            <input type="checkbox" name="hobby" id="" v-model="form.hobby" value="code" />写代码
+        </div>
+        <div>
+            <span>职业:</span>
+            <select name="" id="" v-model="form.occupation" size="4">
+                <option v-for="(item,index) in occupation" :key="index" :selected="item.val === 'boss'"
+                    :value="item.val">
+                    {{ item.title }}
+                </option>
+            </select>
+        </div>
+        <div>
+            <span>简介:</span>
+            <textarea name="" id="" rows="3" v-model="form.description"></textarea>
+        </div>
+        <div>
+            <span>年龄</span>
+            <input type="number" name="" id="" v-model.number="form.age">
+        </div>
+        <div>
+            <span>城市:</span>
+            <select name="" id="" v-model="form.city">
+                <option disabled>请选择城市</option>
+                <option :value="item" v-for="(item,index) in city" :key="index">
+                    {{ item}}
+                </option>
+            </select>
+        </div>
+        <div>
+            <input type="checkbox" name="" id="" v-model.number="form.agree">同意协议
+            <button v-show="form.agree" @click="detailVisible = true;">提交</button>
+        </div>
+        <div v-show="detailVisible">
+            <h1>您的个人信息是</h1>
+            <h1>
+                用户名-{{form.name}}
+                年龄-{{form.age}}
+                性别-{{form.sex}}
+                爱好-{{form.hobby.join(',')}}
+                职业-{{form.occupation}}
+                自我介绍-{{form.description}}
+                城市-{{form.city}}
+            </h1>
+        </div>
+    </div>
+    <script>
+        new Vue({
+            el: '#app',
+            data: {
+                form: {
+                    name: '',
+                    sex: '',
+                    hobby: [],
+                    occupation: '',
+                    description: '',
+                    age: 0,
+                    agree: false,
+                    city: ''
+                },
+                occupation: [
+
+                    {
+                        title: "老板",
+                        val: 'boss'
+                    },
+                    {
+                        title: "软件工程师",
+                        val: 'software engineer'
+                    },
+                    {
+                        title: "律师",
+                        val: 'lawyer'
+                    },
+                    {
+                        title: "老师",
+                        val: 'teacher'
+                    },
+                ],
+                city: ['厦门', '龙岩', '福州', '漳州'],
+                detailVisible: false
+            }
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
