v-show
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <p v-show="isShow">hello world</p> </div> </body> <script> const vm = new Vue({ el : '#app', data : { isShow : true } }) </script> </html>
如果isShow为false, 那么v-show = false相当于将其隐藏了, 当然, 里面不一定需要data里面的属性, 里面也可以是一个表达式, 例如
<p v-show="1==3">hello world</p>
那么就给他隐藏掉了, 查看控制台元素:
得知, 他并没有被删除到, 而是设置了style属性将其隐藏了/
v-if
同v-show一样, 也是条件渲染, 但是v-if里面的值如果为false ,那么就会直接将其彻底从html中删除, 而不是隐藏
v-if通常配合v-else-if来使用, 这个可以和java的流程语句来对比, 他们之间的用法是类似的. 多个判断if 和if else判断, 然后使用v-else来结尾. 但是需要注意的是, v-else是不需要值的:
<p v-show="isShow">hello world</p> <p v-if="true">1</p> <p v-else-if="true">1</p> <p v-else-if="true">1</p> <p v-else>1</p>
但是需要记住的是, 多个v-if v-else的html标签必须连写在一起, 他们中间不允许有其他的标签:
下面是一种错误的写法:
<p v-show="isShow">hello world</p> <p v-if="true">1</p> <div>你好呀</div> <p v-else-if="true">1</p> <p v-else-if="true">1</p> <p v-else>1</p>
那么这个div里面就是打断整个流程的点, 在这个点前面的内容是正常生效的, 但是后面的v-else-if是不会生效的
v-if和template的使用:
<template id="tem2" v-if="1===2"> <p>1</p> <p>2</p> <p>3</p> </template>
template不能和v-show一起使用
