第七节：实战前必须掌握的10个指令(上)

这一节我们来学习并掌握在实战用一定会用到的10个指令，没错，是一定会用到，通过这些指令，可以让我们很方便的完成某些操作。掌握了这几个指令，我们距离实战就又近了一步。

1. v-text 指令

v-text  指令用于更新标签包含的文本，它的作用跟双大括号的效果一样。我们看看它的用法：

1. <div id="app">
   
2.    <p v-text="msg"></p>
   
3. </div>
   
4. <script>
   
5. let app = new Vue({
   
6.     el:"#app",
   
7.     data:{
   
8.         msg:'hello,vue'
   
9.     }
   
10. });
    
11. </script>

复制代码

我们给<p></p>标签加上了指令 v-text ，它的值就是我们data数据中的msg，就这么简单，最后我们来看看渲染结果：

有没有发现，它的作用跟{{ msg }}效果是一样的：

1. <p v-text="msg"></p>
   
2. <!--效果相同-->
   
3. <p>{{ msg }}</p>2. v-html 指令

复制代码

2. v-html 指令

这个指令我们再上一节刚刚讲过，它帮助我们绑定一些包含html代码的数据在视图上，比如：“<b>hello,vue</b>”，这个字符串包含了<b>标签，要想<b>不被当作普通的字符串渲染出来，就得用 v-html 指令。

1. <div id="app">
   
2.     <p v-html="msg"></p>
   
3. </div>
   
4. <script>
   
5. let app = new Vue({
   
6.     el:"#app",
   
7.     data:{
   
8.       msg:'<b>hello,vue</b>'
   
9.     }
   
10. });
    
11. </script>

复制代码

还是上面的代码，我们把 v-text 指令换成 v-html 指令，msg的值变成了含有html代码的：“<b>hello vue</b>”，我们看看渲染效果：

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

3. v-show 指令

v-show ，听这名字就可以猜测它跟元素的显示/隐藏 相关，没错，它就是用来控制元素的display css属性的。

v-show 指令的取值为true/false，分别对应着显示/隐藏。有比较才能看到效果，我们拿两个标签分别设置不同的值，看看解析渲染效果。

1. <div id="app">
   
2.     <p v-show="show1">我是true</p>
   
3.     <p v-show="show2">我是false</p>
   
4. </div>
   
5. <script>
   
6. let app = new Vue({
   
7.     el:"#app",
   
8.     data:{
   
9.         show1:true,
   
10.         show2:false
    
11.     }
    
12. });
    
13. </script>

复制代码

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

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

1.   <p style="display: none">我是false</p>

复制代码

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

4. v-if 指令

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

1. <div id="app">
   
2.     <p v-if="if_1">我是true</p>
   
3.     <p v-if="if_2">我是true</p>
   
4. </div>
   
5. <script>
   
6. let app = new Vue({
   
7.     el:"#app",
   
8.     data:{
   
9.         if_1:true,
   
10.         if_2:false
    
11.     }
    
12. });
    
13. </script>

复制代码

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

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

也许你会问了， v-show 和 v-if 都能控制元素显示或者隐藏，这两个怎么区别使用呢？

记住一点：如果需要频繁切换显示/隐藏的，就用 v-show ；如果运行后不太可能切换显示/隐藏的，就用 v-if 。

5. v-else  指令

if和else在编程语言一般都是结对出现的，在vue里面也不例外。它没有对应的值，但是要求前一个兄弟节点必须要使用 v-if 指令，也对，没有if，哪来的else。

1. <div id="app">
   
2.     <p v-if="if_1">我是if</p>
   
3.     <p v-else>我是else</p>
   
4. </div>
   
5. <script>
   
6. let app = new Vue({
   
7.     el:"#app",
   
8.     data:{
   
9.         if_1:false
   
10.     }
    
11. });
    
12. </script>

复制代码

我们使用两个<p>标签，第一个使用 v-if 指令，并取值为false，第二个使用 v-esle 指令，啥也不说了，看效果最直观：

只有第二个<p>标签被渲染出来，第一个<p>标签由于 v-if 指令的值为false，直接被忽视了，不渲染。

同理，一旦第一个标签的 v-if 指令的值为true，被忽视的就是第二个<p>标签了。 v-if 和 v-else 只有一个会被渲染出来。

有兴趣的同学，可以继续去了解一下 v-else-if 指令，同样很简单。

本节小结

学完本节，你应该掌握了 v-text 、 v-html 、 v-show 、 v-if 、 v-else 这5个指令的用法，并能区别使用 v-if  和   v-show 这2个指令。

后面章节的实战的时候，这些都是会用到的指令，所以要先掌握好，下一章节，我们继续介绍剩下的5个十分重要指令。