hidden（选择隐藏）vue框架，登陆实战 -- CDN模式

最新推荐文章于 2024-05-10 09:58:34 发布

程序员小哲

最新推荐文章于 2024-05-10 09:58:34 发布

阅读量7.2k

点赞数 5

分类专栏： vue 文章标签： java vue python 小程序 js

本文链接：https://blog.csdn.net/xiaozhezhe0470/article/details/105056173

版权

vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

vue框架有两个主要的隐藏显示工具

v-show（为真或不为空显示，为假或为空为隐藏）
视觉上消失了，可以理解为被隐藏掉，在文档流中占位，浏览器会解析该元素
v-if（为真或不为空显示，为假或为空为隐藏）
彻底消失，不在文档流中占位，浏览器也不会解析该元素

注意：测试代码需要联网环境下！

v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <div id='itany'>
      <h1 v-show="name">欢迎您{{name}}</h1>
	  <h1 v-show="!name">请登录</h1>
  </div>
   <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> 
   <script>
      new Vue({
          el:'#itany',
          data:{
              name:'',
          }
      })
    </script>
</body>
</html>

v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <div id='itany'>
      <h1 v-if="name">欢迎您{{name}}</h1>
	  <a v-if="!name" >请登录</h1>
  </div>
   <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> 
   <script>
      new Vue({
          el:'#itany',
          data:{
			  name:'小哲',
          }
      })
    </script>
</body>
</html>

程序员小哲

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
7
评论
hidden（选择隐藏）vue框架，登陆实战 -- CDN模式

vue框架有两个主要的隐藏显示工具v-show（为真或不为空显示，为假或为空为隐藏）彻底消失，不在文档流中占位，浏览器也不会解析该元素v-if（为真或不为空显示，为假或为空为隐藏）视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素注意：测试代码需要联网环境下！代码代写服务，加我微信：ppz2759v-show（display:‘none’）<...
复制链接

扫一扫

专栏目录