diff --git "a/\347\254\254\344\270\211\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/.keep" "b/\347\254\254\344\270\211\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/.keep"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\347\254\254\344\270\211\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/908.html" "b/\347\254\254\344\270\211\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/908.html"
new file mode 100644
index 0000000000000000000000000000000000000000..b486c1f39d153b98efb84e0c79951880248106e0
--- /dev/null
+++ "b/\347\254\254\344\270\211\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/908.html"
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <script src="vue.js"></script>
+    <style>
+        .noramal {
+            background-color: #ffffff;
+        }
+
+        .red {
+            background-color: red;
+        }
+
+
+
+        ul li {
+            float: left;
+            list-style-type: none;
+            width: 100px;
+            height: 50px;
+            line-height: 50px;
+            text-align: center;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="root">
+        <ul>
+            <li :class="color1" @click.self="changeColor1">教父</li>
+            <li :class="color2" @click="changeColor2">阿甘正传</li>
+            <li :class="color3" @click="changeColor3">楚门的世界</li>
+            <li :class="color4" @click="changeColor4">盗梦空间</li>
+        </ul>
+    </div>
+
+    <script>
+        Vue.config.productionTip = false;
+
+        const vm = new Vue({
+            el: '#root',
+            data: {
+                color1: 'normal',
+                color2: 'normal',
+                color3: 'normal',
+                color4: 'normal',
+
+            },
+            methods: {
+                changeColor1() {
+                    this.color1 = 'red'
+                },
+                changeColor2() {
+                    this.color2 = 'red'
+                },
+                changeColor3() {
+                    this.color3 = 'red'
+                },
+                changeColor4() {
+                    this.color4 = 'red'
+                },
+            },
+            created() {
+                this.changeColor1()
+            },
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/.keep" "b/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/.keep"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/905_1.html" "b/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/905_1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..05b0612427755da1529fd10473ba46a417c01aa2
--- /dev/null
+++ "b/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/905_1.html"
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <script type="text/javascript" src="vue.js"></script>
+</head>
+
+<body>
+    <div id="root">
+        请输入张三的成绩：<input type="text" v-model="result" placeholder="按下回车查看等级" @keyup.Enter="showResult"
+            onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
+
+        <!-- <button @click="showResult">33</button> -->
+        <div v-if="x">
+            <div v-if="result>=90 && result&lt;=100">
+                <h1>张三的成绩优秀</h1>
+            </div>
+            <div v-if="result>=75 && result&lt;90">
+                <h1>张三的成绩良好</h1>
+            </div>
+            <div v-if="result>=60 && result&lt;75">
+                <h1>张三的成绩及格</h1>
+            </div>
+            <div v-if="0&lt;=result && result&lt;60">
+                <h1>张三的成绩不及格</h1>
+            </div>
+        </div>
+
+
+
+
+
+
+
+    </div>
+
+
+
+    </template>
+    <script>
+        Vue.config.productionTip = false;
+
+        const vm = new Vue({
+            el: '#root',
+            data: {
+                result: '',
+                x: false,
+            },
+            methods: {
+                showResult() {
+                    this.x = true
+                },
+                // showResult2() {
+                //     this.x = false
+                // }
+            },
+            watch: {
+                result() {
+                    this.x = false
+                }
+            }
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/905_2.html" "b/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/905_2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..b8e0df5fa02075d862c1fe08f4a32ce36234dba6
--- /dev/null
+++ "b/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/905_2.html"
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <script src="vue.js"></script>
+</head>
+
+<body>
+    <div id="root">
+        <img :src=picture alt="" width="200px"><br />
+        <button @click="changePic">点我切换图片</button>
+
+    </div>
+
+    <script>
+
+        Vue.config.productionTip = false;
+        const vm = new Vue({
+            el: '#root',
+            data: {
+                pic: true,
+                x: "images/1.png",
+                u: "images/2.png",
+            },
+            computed: {
+                picture() {
+                    return this.pic ? this.x : this.u
+                }
+            },
+            methods: {
+                changePic() {
+                    this.pic = !this.pic
+                }
+            },
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/905_3.html" "b/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/905_3.html"
new file mode 100644
index 0000000000000000000000000000000000000000..82f042f11f9166f708744b1c97b9406f58c3e191
--- /dev/null
+++ "b/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/905_3.html"
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <script src="vue.js"></script>
+</head>
+
+<body>
+    <div id="root">
+
+        <h1>haha</h1>
+        <template v-for="(item,index) in count2">
+
+            <h1>{{y}}</h1>
+
+        </template>
+
+        <template v-for="(item,index) in count">
+
+            <button>{{x}}</button>
+
+        </template>
+
+
+
+        <br />
+        <hr />
+        <button @click="addRow">点我增加一行</button>
+        <button @click="addOne">点我增加一个按钮</button>
+
+    </div>
+
+
+
+
+    <script>
+        Vue.config.productionTip = false;
+
+        const vm = new Vue({
+            el: '#root',
+            data: {
+                x: 'haha, 我是新增的按钮',
+                count: 0,
+                y: 'haha, 我是新增的一行',
+                count2: '',
+            },
+            methods: {
+                addRow() {
+                    this.count2 = 1
+                },
+                addOne() {
+                    this.count += 1
+                },
+            },
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/905_4.html" "b/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/905_4.html"
new file mode 100644
index 0000000000000000000000000000000000000000..953a4aaa69140b4cf74e711c25c70dded81ebd2a
--- /dev/null
+++ "b/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/905_4.html"
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <script src="vue.js"></script>
+</head>
+
+<body>
+    <div id="root">
+        <input type="text" placeholder="请输入字符" @keydown.caps-lock="change">
+        <h3>{{y}}</h3>
+    </div>
+
+    <script>
+        Vue.config.productionTip = false;
+
+        const vm = new Vue({
+            el: '#root',
+            data: {
+                x: false
+            },
+            methods: {
+                change() {
+                    this.x = !this.x
+                }
+            },
+            computed: {
+                y() {
+                    return this.x ? '当前已切换为大写模式!' : ''
+                }
+            }
+
+        })
+    </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/12\345\274\240\350\211\272\350\261\252/.keep" "b/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/.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/12\345\274\240\350\211\272\350\261\252/919_1.html" "b/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/919_1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0b5b4b80bba68be1475f81d15fc33fc3699a376f
--- /dev/null
+++ "b/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/919_1.html"
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <script src="vue.js"></script>
+</head>
+
+<body>
+    <div id="root">
+        <p>￥：<input type="number" v-model="rnb"></p>
+        <p> &nbsp;$ ：<input type="text" v-model="usd"></p>
+
+        <p v-if="rnb!=0">{{rnb}}人民币={{usd}}美元</p>
+    </div>
+
+    <script>
+        Vue.config.productionTip = false;
+
+        const vm = new Vue({
+            el: '#root',
+            data: {
+                rnb: '',
+                usd: '',
+            },
+            watch: {
+                rnb() {
+                    this.usd = parseFloat(0.1405 * this.rnb).toFixed(4)
+                }
+            },
+
+        })
+
+    </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/12\345\274\240\350\211\272\350\261\252/919_2.html" "b/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/919_2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..cc8354867d5b973035006f048f67982ee538cf51
--- /dev/null
+++ "b/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/919_2.html"
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <script src="vue.js"></script>
+    <style>
+        #root table tr td {
+            text-align: center;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="root">
+        <button @click="showAdd">添加</button>
+        <table border="1" cellpadding="5" cellspacing="0" width="600">
+            <thead>
+                <tr>
+                    <th>id</th>
+                    <th>商品名称</th>
+                    <th>商品价格</th>
+                    <th>商品数量</th>
+                    <th>小计</th>
+                    <th>操作</th>
+
+                </tr>
+            </thead>
+            <tbody>
+
+
+
+                <tr v-for="good in lists" :key="good.id">
+
+                    <td>{{good.id}}</td>
+                    <td>{{good.name}}</td>
+                    <td>{{good.price}}</td>
+                    <td><button @click="minus">-</button>&nbsp;&nbsp;{{good.num}}&nbsp;&nbsp;<button
+                            @click="plus">+</button></td>
+                    <td>{{good.xj}}</td>
+                    <td><button>移除</button></td>
+
+                </tr>
+
+                <tr v-if="x==1">
+                    <td>
+                        <span :text="goods.id"></span>
+                    </td>
+                    <td><input type="text" v-model="goods.name" style="width:50px"></td>
+                    <td><input type="text" v-model="goods.price" style="width:50px"></td>
+                    <td><input type="text" v-model="goods.num" style="width:50px"></td>
+
+                    <td>{{xj}}</td>
+                    <td><button @click="add">确定</button></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <script>
+        Vue.config.productionTip = false;
+
+        const vm = new Vue({
+            el: '#root',
+            data: {
+                lists: [
+                    { id: '1', name: '充电宝', price: '99.111', num: 1, xj: '99.111' },
+                    { id: '2', name: '小风扇', price: '88.222', num: '1', xj: '88.222' },
+                    { id: '3', name: '小音箱', price: '125.533', num: '1', xj: '125.533' },
+                    { id: '4', name: '蓝牙耳机', price: '315.344', num: '1', xj: '315.344' },
+                ],
+                goods: {
+                    id: '',
+                    name: '',
+                    price: '',
+                    num: '',
+                    xj: '',
+
+                },
+                x: 0
+            },
+            computed: {
+                xj() {
+                    return this.goods.price * this.goods.num
+                }
+            },
+            methods: {
+                add() {
+                    this.goods.xj = this.goods.price * this.goods.num
+                    this.lists.push(this.goods)
+                    this.x = 0
+                },
+                showAdd() {
+                    this.x = 1
+                    this.goods.id = this.lists.length + 1
+                },
+                minus() {
+
+                },
+                plus() {
+
+                }
+            },
+        })
+    </script>
+</body>
+
+</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/12\345\274\240\350\211\272\350\261\252/.keep" "b/\347\254\254\345\205\255\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/.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/12\345\274\240\350\211\272\350\261\252/922.html" "b/\347\254\254\345\205\255\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/922.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8d2704cb0e04693d229012e15b574ba83eab37e1
--- /dev/null
+++ "b/\347\254\254\345\205\255\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/922.html"
@@ -0,0 +1,97 @@
+<!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>
+</head>
+
+<body>
+    <div id="root">
+        <form action="">
+            <p>姓名：
+                <input type="text" name="name" v-model="msg.name">
+            </p>
+            <p>性别：
+                <input type="radio" value="male" name="sex" v-model="msg.sex">男
+                <input type="radio" value="female" name="sex" v-model="msg.sex">女
+            </p>
+            <p>爱好：
+                <input type="checkbox" value="basketball" name="hobby" v-model="msg.hobby">篮球
+                <input type="checkbox" value="singing" name="hobby" v-model="msg.hobby">唱歌
+                <input type="checkbox" value="writeCode" name="hobby" v-model="msg.hobby">写代码
+            </p>
+            <p>职业：
+                <select name="occupation" id="" v-model="msg.occupation">
+                    <option value="boss">老板</option>
+                    <option value="softwareEngineer">软件工程师</option>
+                    <option value="lawyer">律师</option>
+                    <option value="teacher">教师</option>
+                </select>
+            </p>
+            <p>个人简介：
+                <textarea rows="2" cols="15" name="intro" v-model="msg.intro"></textarea>
+            </p>
+            <p>年龄：
+                <input type="text" name="age" v-model="msg.age">
+            </p>
+            <p>城市：
+                <select name="city" id="" v-model="msg.city">
+                    <option>请选择城市</option>
+                    <option value="厦门">厦门</option>
+                    <option value="龙岩">龙岩</option>
+                    <option value="福州">福州</option>
+                    <option value="漳州">漳州</option>
+                </select>
+            </p>
+            <p>
+                <input type="checkbox" v-model="msg.accept">同意协议
+                <input type="submit" value="提交" @click.prevent="submit">
+                <!-- <button @click.prevent="submit">提交</button> -->
+            </p>
+
+            <h2 v-show="this.x==2">您的个人信息是：</h2>
+            <h2 v-show="this.x==2">
+                用户名-{{this.msg.name}}，年龄-{{this.msg.age}}，性别-{{this.msg.sex}}，爱好-{{this.msg.hobby}}，职业-{{this.msg.occupation}}，自我介绍-{{this.msg.intro}},
+                城市-{{this.msg.city}}
+            </h2>
+        </form>
+
+    </div>
+    <script>
+        Vue.config.productionTip = false;
+        const vm = new Vue({
+            el: '#root',
+            data: {
+                msg: {
+                    name: '',
+                    age: '',
+                    sex: '',
+                    hobby: [],
+                    occupation: [],
+                    intro: '',
+                    city: [],
+                    accept: '',
+                },
+                x: 1,
+            },
+            methods: {
+                submit() {
+                    if (this.msg.accept == true) {
+                        return this.x = 2
+                    }
+                },
+
+            },
+        })
+
+
+
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/.keep" "b/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/.keep"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/912_1.html" "b/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/912_1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..aac38d6a2403d765350aba68f99a7e839df36adc
--- /dev/null
+++ "b/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/912_1.html"
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <script src="vue.js"></script>
+</head>
+
+<body>
+    <div id="root">
+        <p>商品：<input type="text" v-model="goods.name"></p>
+        <p>数量：<input type="text" v-model="goods.quentity"></p>
+        <p>价格：<input type="text" v-model="goods.price"></p>
+        <div><button @click="add">添加到购物车</button></div>
+
+        <div>
+            <ul>
+                <li v-for="good in lists" :key="good.name">
+                    {{good.name}}的数量是{{good.quentity}},单价是{{good.price}},小计：{{good.subTotal}}</li>
+
+            </ul>
+            <ul v-if="x==2">
+                <li>总数----{{totalCount}}总价----{{totalPrice}}</li>
+            </ul>
+        </div>
+    </div>
+
+    <script>
+        Vue.config.productionTip = false;
+        const vm = new Vue({
+            el: '#root',
+            data: {
+                lists: [
+
+                ],
+                goods: {
+                    subTotal: '',
+                    name: '',
+                    quentity: '',
+                    price: '',
+
+                },
+                x: '1'
+            },
+            computed: {
+                totalCount() {
+                    let quentity = 0
+                    for (let i = 0; i < this.lists.length; i++) {
+                        quentity += parseInt(this.lists[i].quentity);
+                    }
+                    return quentity;
+                },
+                totalPrice() {
+                    let price = 0
+                    for (let i = 0; i < this.lists.length; i++) {
+                        price += this.lists[i].subTotal;
+                    }
+                    return price;
+                }
+
+            },
+            methods: {
+                add() {
+                    this.goods.subTotal = this.goods.price * this.goods.quentity
+                    this.lists.push(this.goods);
+                    this.goods = {
+                        name: '',
+                        quentity: '',
+                        price: '',
+                        subTotal: '',
+                    },
+                        this.x = '2'
+
+
+                },
+            },
+
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/912_2.html" "b/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/912_2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f9c338c212731872723dba4f9bf418b9e0b307f7
--- /dev/null
+++ "b/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/12\345\274\240\350\211\272\350\261\252/912_2.html"
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <script src="vue.js"></script>
+</head>
+
+<body>
+    <div id="root">
+        <input type="text" v-model="msg">
+        <h1>{{msg | replace}}</h1>
+
+        <input type="text" v-model="number">
+        <h1 v-if="number!=''">{{number | numReplace}}元</h1>
+
+    </div>
+
+    <script>
+        Vue.config.productionTip = false;
+
+        const vm = new Vue({
+            el: '#root',
+            data: {
+                msg: '',
+                number: '',
+            },
+            filters: {
+                replace(value) {
+                    return value.replace(/\s/g, "");
+                },
+                numReplace(value) {
+                    return parseFloat(value).toFixed(2);
+                },
+            }
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file

id	商品名称	商品价格	商品数量	小计	操作
{{good.id}}	{{good.name}}	{{good.price}}	{{good.num}}	{{good.xj}}
+ +				{{xj}}