条件渲染指令

vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。

 

1、v-if

?

1 2 3 4 5 6 7

标签元素：      <!-- vue对象最终会把条件的结果变成布尔值 -->            <h1 v-if="ok">Yes</h1>  data数据：        data:{            ok:false    // true则是显示，false是隐藏      }

　　

2、v-else

?

1	v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

　　

?

1 2 3 4 5 6 7

标签元素：            <h1 v-if="ok">Yes</h1>            <h1 v-else>No</h1>  data数据：        data:{            ok:false    // true则是显示，false是隐藏      }

　　

3、v-else-if

?

1	可以出现多个v-else-if语句，但是v-else-if之前必须有一个v-if开头。后面可以跟着v-else，也可以没有。

　　

?

1 2 3 4 5 6 7 8

标签元素：           <h1 v-if="num==1">num的值为1</h1>           <h1 v-else-if="num==2">num的值为2</h1>           <h1 v-else>num的值是{{num}}</h1> data数据：       data:{           num:2     }

　　

4、v-show

?

1 2 3 4

用法和v-if大致一样，区别在于2点：   v-show后面不能v-else或者v-else-if v-show隐藏元素时，使用的是display:none来隐藏的，而v-if是直接从HTML文档中移除元素[ DOM操作中的remove ]

　　

?

1 2 3 4 5 6

标签元素：            <h1 v-show="ok">Hello!</h1>  data数据：        data:{            ok:false    // true则是显示，false是隐藏      }