五、Vue的10个指令

1. v-text 指令

v-text ：用于更新标签包含的文本，它的作用跟双大括号的效果一样;

标签加上了指令 v-text ，它的值就是data数据中的msg，渲染结果：

渲染成功

===
{{msg}}

2. v-html 指令

用法：绑定一些包含html代码的数据在视图上，比如：“< em >hello，Vue!< /em >”，这个字符串包含了< em >标签，要想< em >不被当作普通的字符串渲染出来，就得用 v-html 指令;

渲染成功

< em >标签被成功解析并渲染出来，视图上的文本也有了加粗 斜体的效果，这就是v-html发挥了作用，bingo！

3. v-show 指令

v-show 指令：用来控制元素的display css属性的，取值为true/false;

    
我是false
    
我是true

用了两个< p >标签，都加上了 v-show 指令，取值分别为true和fasle，直接看效果

渲染成功

释：第二个p标签的v-show设置为true，元素正常显示；第一个p标签的v-show设置为false，元素解析成：

我是false

所以它不会显示在视图上。这就是 v-show 指令的用法，简单明了。

4. v-if 指令

v-if 指令的取值也是为true或false，它控制元素是否需要被渲染出来，拿两个元素设置不用的值，对比一下看效果就知道了。

    
我是true
    
我是false

把 v-show 指令换成了 v-if ，同样是两个< p >标签，同样是不同的取值：true和false。看效果:

v-if true渲染成功

释：设置为true的< p >标签，成功渲染出来，而设置为false的< p >标签，直接被一行注释代替了，并没有被解析渲染出来。

v-show 和 v-if 都能控制元素显示或者隐藏，区别:如果需要频繁切换显示/隐藏的，就用 v-show；如果运行后不太可能切换显示/隐藏的，就用 v-if 。

5. v-else 指令

v-else 指令：要求前一个兄弟节点必须要使用 v-if 指令;

    
我是if_1
    
我是else_1
    
我是if_2
    
我是else_2

渲染成功

释：只有第二个< p >标签被渲染出来，第一个< p >标签由于 v-if 指令的值为false，直接被忽视了，不渲染。直接渲染第二个< p >
一旦第一个标签的 v-if 指令的值为true，被忽视的就是第二个< p >标签了。 v-if 和 v-else 只有一个会被渲染出来。

6. v-for 指令

v-for 指令：data中的存放的数据不是个简单的数字或者字符串，而是数组Array类型，这时，要把数组的元素展示在视图上，就需要用到vue提供的 v-for 指令，来实现列表的渲染。

    
我是{{list}}

释：用 v-bind 指令来修饰src属性，表明它的值是一个动态的值，对应的则是data中的src的值：../images/2.jpg.

8. v-on 指令

v-on 指令相当于绑定事件的监听器，绑定的事件触发了，可以指定事件的处理函数;

    点击

通过 v-on 指令修饰click点击事件，指定事件响应后的处理函数为methods中的click_btn( )方法

渲染成功

释：点击按钮，可以成功触发click事件，并且调用click_btn( )，想给处理程序say( )传参数，也是可以的；

    点击

带参数渲染成功

释：click_btn(sex)接受一个参数sex，并把sex打印出来，在调用的时候传如实参“女”。

9. v-model 指令

v-model 指令：最重要最常用的指令，一般用在表单输入，它帮助我们轻易地实现表单控件和数据的双向绑定。

    
    
刚刚输入的是：{{msg}}

释： 修改1:< p >标签增加了 v-once 指令；
修改2：msg的初始值不再是空字符串。看效果：

渲染成功

释： 由于msg有了初始值，第一次渲染的时候，input控件和< p >标签都有了内容，由于< p>标签添加了 v-once 指令，所以，后期更新msg的值的时候，< p>标签的内容不会发生改变；