使用v-show v-if 设置元素显示和隐藏

一丶  一般情况我们可以设置元素的display属性来控制元素显示和隐藏

display: none;    //元素不会显示
display: block;   //显示为块级元素,元素后面带有换行符
display: inline;  //显示为内联元素,元素后面没有换行符 

这里简单说下内联元素和块级元素

1、块级元素：一般都从新行开始占据一定的矩形空间，可以设置其宽、高属性来改变矩形的大小。一般情况下块级元素可以包含内联元素和其它块级元素，但也有特殊如form只能包含其它块级元素，p只能包含内联元素。常见块级元素如div、p、form等。常见的块级元素有 div    from    talbe    p    pre    h1-h6    dl    ol    ul 等

2、内联元素：也叫内嵌元素、行内元素、直进式元素。一般都是基于语义级(semantic)的基本元素，没有自己独立的空间，依附于其它块级元素存在的，因此一般情况下设置其宽、高属性是无效的（特殊如img可以设置宽高）。内联元素只能包含文本和其它内联元素。常见内联元素如span、a等。常见的内联元素有 span    a    strong    em    label    input    select    textarea     img    br  等

二丶 通过jQuery显示和隐藏HTML元素

$("p").hide();   //隐藏
$("p").show();   //显示
$("p").toggle(); //切换(显示隐藏的元素,隐藏已显示的元素)

三丶v-show 

建立一个Vue对象  在data里面添加一个参数  比如 show:false;  false为隐藏  true为显示  默认为隐藏  通过调用 toshow() 这个方法显示和隐藏元素    另外还需要在需要隐藏的元素使用v-show指令

  
  


  

    显示/隐藏
    
我会隐藏
  

四丶 v-if
作用  判断是否加载固定的内容  如果为真就加载否则不加载
用处  用在权限管理  页面加载
语法  v-if="判断表达式"  (和v-show一样使用)
特点  控制元素插入或删除 而不是隐藏（v-show是隐藏）
v-if 与 v-show 的区别 :
v-if 的安全级别更高 v-show 只是隐藏了 通过页面源代码还是可以看到 安全级别低、
v-if 更高的切换消耗(切换消耗指从未加载到加载或者从加载到未加载的状况，需要添加或删除这个元素) v-show 需要更高的初始化渲染消耗

因此如果需要频繁切换而对安性无要求使用 v-show  如果运行时条件不能改变使用 v-if

v-else 要紧跟在 v-if 后面  表示 v-if 条件不成立时执行  多次判断则使用 v-esle-if 

例: 

已审核
未审核