diff --git a/21-Vue基础/01-03.Vue的系统指令(二).md b/21-Vue基础/01-03.Vue的系统指令(二).md
index 57a2268..3e51026 100644
--- a/21-Vue基础/01-03.Vue的系统指令(二).md
+++ b/21-Vue基础/01-03.Vue的系统指令(二).md
@@ -1,6 +1,12 @@
 
 
-## v-model：双向数据绑定
+## 前言
+
+文本主要内容：
+
+- v-model
+
+## v-model：双向数据绑定（只能用于表单元素）
 
 之前的文章里，我们通过v-bind，给`<input>`标签绑定了`data`对象里的`name`属性。当`data`里的`name`的值发生改变时，`<input>`标签里的内容会自动更新。
 
@@ -14,7 +20,6 @@
 
 **注意**：v-model 只能运用在**表单元素**中。常见的表单元素包括：input(radio, text, address, email....) 、select、checkbox 、textarea。
 
-
 代码举例如下：
 
 ```html
@@ -59,12 +64,365 @@
 </html>
 ```
 
-
 此时，便可实现我们刚刚要求的双向数据绑定的效果。
 
+## v-model举例：实现简易计算器
+
+题目：现在两个输入框，用来做加减乘除，将运算的结果放在第三个输入框。
+
+实现代码如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <input type="text" v-model="n1">
+
+        <select v-model="opt">
+            <option value="+">+</option>
+            <option value="-">-</option>
+            <option value="*">*</option>
+            <option value="/">/</option>
+        </select>
+
+        <input type="text" v-model="n2">
+
+        <input type="button" value="=" @click="calc">
+
+        <input type="text" v-model="result">
+    </div>
+
+    <script>
+        // 创建 Vue 实例，得到 ViewModel
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                n1: 0,
+                n2: 0,
+                result: 0,
+                opt: '+'
+            },
+            methods: {
+                calc() { // 计算器算数的方法
+                    // 逻辑判断：
+                    switch (this.opt) {
+                        case '+':
+                            this.result = parseInt(this.n1) + parseInt(this.n2)
+                            break;
+                        case '-':
+                            this.result = parseInt(this.n1) - parseInt(this.n2)
+                            break;
+                        case '*':
+                            this.result = parseInt(this.n1) * parseInt(this.n2)
+                            break;
+                        case '/':
+                            this.result = parseInt(this.n1) / parseInt(this.n2)
+                            break;
+                    }
+
+                    //上面的逻辑判断，可能有点啰嗦，我们还可以采取下面的这种方式进行逻辑判断
+                    // 注意：这是投机取巧的方式，正式开发中，尽量少用
+                    // var codeStr = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'
+                    // this.result = eval(codeStr)
+                }
+            }
+        });
+    </script>
+</body>
+
+</html>
+```
+
+注意上方代码中的注释，可以了解下`eval()`的用法。
+
+## Vue中通过属性绑定为元素设置class 类样式
+
+注意，是**类样式**。
+
+### 引入
+
+我们先来看下面这段代码：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <style>
+        .my-red {
+            color: red;
+        }
+
+        .my-thin {
+            /* 设置字体的粗细 */
+            font-weight: 200;
+        }
+
+        .my-italic {
+            font-style: italic;
+        }
+
+        .my-active {
+            /* 设置字符之间的间距 */
+            letter-spacing: 0.5em;
+        }
+    </style>
+</head>
+
+<body>
+    <h1 class="my-red my-thin">我是生命壹号，smyhvae</h1>
+</body>
+
+</html>
+```
+
+上面的代码中，我们直接通过正常的方式，给`<h1>`标签设置了两个 class 类的样式。代码抽取如下：
+
+```html
+    <h1 class="my-red my-thin">我是生命壹号，smyhvae</h1>
+```
+
+上面的效果，我们还可以用Vue来写。这就引入了本段要讲的方式。
+
+### 方式一：数组
+
+**方式一**：直接传递一个数组。注意：这里的 class 需要使用  v-bind 做数据绑定。
+
+代码如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+    <style>
+        .my-red {
+            color: red;
+        }
+
+        .my-thin {
+            /* 设置字体的粗细 */
+            font-weight: 200;
+        }
+
+        .my-italic {
+            font-style: italic;
+        }
+
+        .my-active {
+            /* 设置字符之间的间距 */
+            letter-spacing: 0.5em;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+
+        <!-- 普通写法 -->
+        <h1 class="my-red my-thin">我是生命壹号，smyhvae</h1>
+
+        <!-- vue的写法1：数组的形式 -->
+        <h1 :class="['my-red', 'my-thin']">我是smyhvae，生命壹号</h1>
+
+    </div>
+
+    <script>
+
+        var vm = new Vue({
+            el: '#app'
+        });
+
+    </script>
+</body>
+
+</html>
+```
+
+代码抽取如下：
+
+```html
+        <!-- vue的写法1：数组的形式 -->
+        <h1 :class="['my-red', 'my-thin']">我是smyhvae，生命壹号</h1>
+```
+
+上方代码中，注意，数组里写的是字符串；如果不加单引号，就不是字符串了，而是变量。
+
+演示效果如下：
+
+20180509_1058.png
+
+### 写法二：在数组中使用三元表达式
+
+```html
+<body>
+    <div id="app">
+        <!-- vue的写法2：在数组中使用三元表达式。注意格式不要写错-->
+        <!-- 通过data中布尔值 flag 来判断：如果 flag 为 true，就给 h1 标签添加`my-active`样式；否则，就不设置样式。 -->
+        <h1 :class="[flag?'my-active':'']">我是smyhvae，生命壹号</h1>
+    </div>
+
+    <script>
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                flag:true
+            }
+        });
+    </script>
+</body>
+```
+
+上方代码的意思是，通过data中布尔值 flag 来判断：如果 flag 为 true，就给 h1 标签添加`my-active`样式；否则，就不设置样式。
+
+注意，三元表达式的格式不要写错了。
 
 
-## v-for：for循环
+### 写法三：在数组中使用 对象 来代替 三元表达式（提高代码的可读性）
+
+上面的写法二，可读性较差。于是有了写法三。
+
+**写法三**：在数组中使用**对象**来代替**三元表达式**。
+
+代码如下：
+
+```html
+<body>
+    <div id="app">
+        <!-- vue的写法3：在数组中使用对象来代替三元表达式。-->
+        <h1 :class="[ {'my-active':flag} ]">我是smyhvae，生命壹号</h1>
+    </div>
+
+    <script>
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                flag: true
+            }
+        });
+    </script>
+</body>
+```
+
+### 写法四：直接使用对象
+
+写法四：直接使用对象。代码如下：
+
+```html
+        <!-- vue的写法4：直接使用对象-->
+        <!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名。由于 对象的属性名可带引号，也可不带引号，所以 这里我没写引号；  属性的值 是一个标识符 -->
+        <h1 :class="{style1:true, style2:false}">我是smyhvae，生命壹号</h1>
+```
+
+上方代码的意思是，给`<h1>`标签使用样式`style1`，不使用样式`style2`。注意：
+
+1、既然class样式名是放在对象中的，这个样式名不能有中划线，比如说，写成`:class="{my-red:true, my-active:false}`，是会报错的。
+
+2、我们也可以对象通过存放在 data 的变量中。也就是说，上方代码可以写成：
+
+```html
+<body>
+    <div id="app">
+        <!-- vue的写法4：直接使用对象-->
+        <!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名。由于 对象的属性名可带引号，也可不带引号，所以 这里我没写引号；  属性的值 是一个标识符 -->
+        <h1 :class="classObj">我是smyhvae，生命壹号</h1>
+    </div>
+
+    <script>
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                classObj:{style1:true, style2:false}
+            }
+        });
+    </script>
+</body>
+```
+
+## Vue中通过属性绑定为元素设置 style 行内样式
+
+注意，是行内样式（即内联样式）。
+
+### 写法一
+
+**写法一**：直接在元素上通过 `:style` 的形式，书写样式对象。
+
+例如：
+
+```html
+        <h1 :style="{color: 'red', 'font-size': '20px'}">我是生命壹号，smyhvae</h1>
+```
+
+### 写法二
+
+**写法二**：将样式对象，定义到 `data` 中，并直接引用到 `:style` 中。
+
+也就是说，把写法一的代码改进一下。代码如下：
+
+```html
+<body>
+    <div id="app">
+        <h1 :style="styleObj">我是生命壹号，smyhvae</h1>
+    </div>
+
+    <script>
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                styleObj: { color: 'red', 'font-size': '20px' }
+            }
+        });
+    </script>
+</body>
+```
+
+### 写法三
+
+写法二只用到了一组样式。如果想定义**多组**样式，可以用写法三。
+
+**写法三**：在 `:style` 中通过数组，引用多个 `data` 上的样式对象。
+
+代码如下：
+
+```html
+<body>
+    <div id="app">
+        <h1 :style="[ styleObj1, styleObj2 ]">我是生命壹号，smyhvae</h1>
+    </div>
+
+    <script>
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                styleObj1: { color: 'red', 'font-size': '20px' },
+                styleObj2: { 'font-style': 'italic' }
+            }
+        });
+    </script>
+</body>
+```
+
+
+## v-for：for循环的四种使用方式
 
 **作用**：根据数组中的元素遍历指定模板内容生成内容。
 
@@ -72,7 +430,6 @@
 
 比如说，如果我想给一个`ul`中的多个`li`分别赋值1、2、3...。如果不用循环，就要挨个赋值：
 
-
 ```html
 <body>
   <div id="app">
@@ -101,7 +458,6 @@
 
 为了实现上面的效果，如果我用`v-for`进行赋值，代码就简洁很多了：
 
-
 ```html
 <body>
   <div id="app">
@@ -123,14 +479,12 @@
 </script>
 ```
 
-接下来，我们详细讲一下`v-for`的用法。需要声明的是，Vue 1.0的写法和Vue 2.0的写法是不一样的。本文全部采用Vue 2.0的写法
+接下来，我们详细讲一下`v-for`的用法。需要声明的是，Vue 1.0的写法和Vue 2.0的写法是不一样的。本文全部采用Vue 2.0的写法。
 
-
-### 数组的遍历赋值
+### 方式一：普通数组的遍历
 
 针对下面这样的数组：
 
-
 ```html
 <script>
   new Vue({
@@ -142,31 +496,74 @@
 </script>
 ```
 
-
 将数组中的**值**赋给li：
 
 ```html
       <li v-for="item in arr1">{{item}}</li>
 ```
 
-
 将数组中的**值和index**赋给li：
 
 
 ```html
-      <!-- 括号里如果写两个参数：第一个参数代表值，第二个参数代表index -->
+      <!-- 括号里如果写两个参数：第一个参数代表值，第二个参数代表index 索引 -->
       <li v-for="(item,index) in arr1">值：{{item}} --- 索引：{{index}}</li>
 ```
 
-
 效果如下：
 
 ![](http://img.smyhvae.com/20180329_1856.png)
 
+### 方式二：对象数组的遍历
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+    <style>
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <ul>
+            <!-- 对象数组的遍历。括号里如果写两个参数：第一个参数代表数组的单个item，第二个参数代表 index 索引-->
+            <li v-for="(item, index) in dataList">姓名：{{item.name}} --- 年龄：{{item.age}} --- 索引：{{index}}</li>
+
+        </ul>
+    </div>
+
+    <script>
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                //对象数组
+                dataList: [
+                    { name: 'smyh', age: '26' },
+                    { name: 'vae', age: '32' },
+                    { name: 'xiaoming', age: '20' }
+                ]
+            }
+        });
+    </script>
+</body>
+
+</html>
+
+```
+
+效果如下：
+
+20180509_1500.png
 
 
-### 对象的遍历赋值
-
+### 方式三：对象的遍历
 
 针对下面这样的对象：
 
@@ -187,7 +584,6 @@
 
 将上面的`obj1`对象的数据赋值给li，写法如下：
 
-
 ```html
 <body>
   <div id="app">
@@ -209,6 +605,108 @@
 
 ![](http://img.smyhvae.com/20180329_1850.png)
 
+### 方式四：遍历数字
+
+`in`后面还可以直接放数字。举例如下：
+
+```html
+        <ul>
+            <!-- 对象数组的遍历 -->
+            <!-- 注意：如果使用 v-for 遍历数字的话，前面的 myCount 值从 1 开始算起 -->
+            <li v-for="myCount in 10">这是第 {{myCount}}次循环</li>
+        </ul>
+```
+
+效果如下：
+
+20180509_1505.png
+
+
+### v-for中key的使用注意事项
+
+
+**注意**：在 Vue 2.2.0+ 版本里，当在**组件中**使用 v-for 时，key 属性是必须要加上的。
+
+这样做是因为：每次 for 循环的时候，通过指定 key 来标示当前循环这一项的**唯一身份**。
+
+> 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “**就地复用**” 策略。如果数据项的顺序被改变，Vue将**不是移动 DOM 元素来匹配数据项的顺序**， 而是**简单复用此处每个元素**，并且确保它在特定索引下显示已被渲染过的每个元素。
+
+
+> 为了给 Vue 一个提示，**以便它能跟踪每个节点的身份，从而重用和重新排序现有元素**，你需要为每项提供一个唯一 key 属性。
+
+
+key的类型只能是：string/number，而且要通过 v-bind 来指定。
+
+
+代码举例：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+</head>
+
+<body>
+    <div id="app">
+
+        <div>
+            <label>Id:
+                <input type="text" v-model="id">
+            </label>
+
+            <label>Name:
+                <input type="text" v-model="name">
+            </label>
+
+            <input type="button" value="添加" @click="add">
+        </div>
+
+        <!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string -->
+        <!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
+        <!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 -->
+        <p v-for="item in list" :key="item.id">
+            <input type="checkbox">{{item.id}} --- {{item.name}}
+        </p>
+    </div>
+
+    <script>
+        // 创建 Vue 实例，得到 ViewModel
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                id: '',
+                name: '',
+                list: [
+                    { id: 1, name: 'smyh' },
+                    { id: 2, name: 'vae' },
+                    { id: 3, name: 'smyhvae' },
+                    { id: 4, name: 'xiaoming' },
+                    { id: 5, name: 'xiaohong' }
+                ]
+            },
+            methods: {
+                add() { // 添加方法
+                    this.list.unshift({ id: this.id, name: this.name })
+                }
+            }
+        });
+    </script>
+</body>
+
+</html>
+```
+
+
+
+
+
+
 
 ## v-if：设置元素的显示和隐藏
 
