diff --git a/src/App.vue b/src/App.vue
index f7b139d5d0f984ceb4576f77b9007d2766d9d446..b18edfa556d4ebcc357fbcb0d6ad01b19e3598d6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,24 +2,30 @@
   <div id="app">
     <!-- <img alt="Vue logo" src="./assets/logo.png">
     <HelloWorld msg="Welcome to Your Vue.js App"/>
-    <First msg="First Use Vue"/> -->
+    <First msg="First Use Vue"/>-->
+    <!-- <computed-and-watch /> -->
     <computed-and-watch />
+    <class-style />
   </div>
 </template>
 
 <script>
 // import HelloWorld from './components/HelloWorld.vue'
 // import First from './components/First.vue'
-import ComputedAndWatch from './components/ComputedAndWatch.vue'
+// import ComputedAndWatch from './components/ComputedAndWatch.vue'
+// import ClassStyle from './components/ClassStyle.vue'
+import IfandShow from "./components/IfandShow.vue";
 
 export default {
-  name: 'App',
+  name: "App",
   components: {
     // HelloWorld
     // First
-    ComputedAndWatch
-  }
-}
+    // ComputedAndWatch
+    // ClassStyle
+    IfandShow,
+  },
+};
 </script>
 
 <style>
diff --git a/src/components/ClassStyle.vue b/src/components/ClassStyle.vue
new file mode 100644
index 0000000000000000000000000000000000000000..59c9208e417e2f97a2ebfa3aebb189b0d98dcf33
--- /dev/null
+++ b/src/components/ClassStyle.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <p :class="aClass">风格玩法字符串</p>
+    <p :class="{Class0:true,Class1:true}">风格玩法对象</p>
+    <p :class="['aClass','bClass']">风格玩法对象数组</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ClassStyle",
+  data() {
+    return {
+      aClass: "Class0",
+      bClass: "Class1",
+    };
+  },
+};
+</script>
+
+<style scoped>
+.Class0 {
+  font-size: 30px;
+  color: red;
+}
+.Class1 {
+  width: 200px;
+  height: 200px;
+  margin: 10px,auto;
+  background-color: skyblue;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ComputedAndWatch.vue b/src/components/ComputedAndWatch.vue
index 9bda6f049f69500b6109e43d40ef750be6505712..ef10cf156fbec750a2816e261675f5ff65b51309 100644
--- a/src/components/ComputedAndWatch.vue
+++ b/src/components/ComputedAndWatch.vue
@@ -13,7 +13,11 @@
     <p>分割线</p>
     <label>
       姓名:
-      <input type="text" v-model="fullName" />
+      <input type="text" v-model="fullName0" />
+      <p></p>
+      <input type="text" v-model="fullName1" />
+      <p></p>
+      <input type="text" v-model="fullName2" />
     </label>
   </div>
 </template>
@@ -28,11 +32,34 @@ export default {
     };
   },
   computed: {
-    fullName: {
+    fullName0: {
       get() {
         return this.firstName + "·" + this.lastName;
       },
     },
+    fullName1: {
+      get() {
+        return this.firstName + "·" + this.lastName;
+      },
+      set(value) {
+        console.log("fullName1-setter,${value}");
+        let names = value.split("·");
+        this.firstName = names[0];
+        this.lastName = names[1];
+      },
+    },
+  },
+  watch: {
+    fullName2: {
+      firstName(val) {
+        console.log("Watch firstName :${val}");
+        this.firstName = val + "·" + this.lastName;
+      },
+      lastName(val) {
+        console.log("Watch lastName :${val}");
+        this.lastName = this.firstName + val;
+      },
+    },
   },
 };
 </script>
diff --git a/src/components/IfandShow.vue b/src/components/IfandShow.vue
new file mode 100644
index 0000000000000000000000000000000000000000..07f1051f69869955a56dc43c52e6f1e99bba6418
--- /dev/null
+++ b/src/components/IfandShow.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <h3>条件渲染</h3>
+    <p v-if="flag">条件渲染true</p>
+    <p v-else>条件渲染false</p>
+    <button @click="flag = !flag">Exchange</button>
+    <p></p>
+    <p v-show="flag">条件渲染true</p>
+    <p v-show="!flag">条件渲染false</p>
+    <button @click="flag = !flag">Exchange</button>
+    <h3>列表渲染</h3>
+    <ul>
+      <li v-for="(psn,idx) in persons" :key="psnKeys[idx]">{{idx}} ) {{psn.name}},{{psn.age}}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import shortid from 'shortid'
+export default {
+  name: "IfandShow",
+  data() {
+    return {
+      flag: true,
+      persons: [
+        { name: "one", age: 18 },
+        { name: "two", age: 28 },
+        { name: "six", age: 38 },
+      ],
+      psnKeys:[
+
+      ],
+    },
+    mount(){
+        this.psnKeys = this.persons.map(v=>shortid.generate())
+    }
+  },
+};
+</script>
+
+<style scoped>
+</style>