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

最新推荐文章于 2025-02-20 16:36:43 发布

xingxingxingge

最新推荐文章于 2025-02-20 16:36:43 发布

阅读量2.6w

点赞数 4

分类专栏： Vue

本文链接：https://blog.csdn.net/xingxingxingge/article/details/79617334

版权

Vue 专栏收录该内容

19 篇文章

订阅专栏

一丶一般情况我们可以设置元素的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指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button @click="toshow()">显示/隐藏</button>
    <div v-show="show">我会隐藏</div>
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  var myapp=new Vue({
    el:'#app',
    data:{
      show: false,
    },
    methods:{
      toshow:function () {
        this.show = !this.show;
      }
    }
  });
</script>
</body>
</html>

四丶 v-if
作用判断是否加载固定的内容如果为真就加载否则不加载
用处用在权限管理页面加载
语法 v-if="判断表达式" (和v-show一样使用)
特点控制元素插入或删除而不是隐藏（v-show是隐藏, 相当于display: none;）
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

例:

<div v-if="show">已审核</div>
<div v-else>未审核</div>