前端应用_Vue_ 用v-if和v-else控制组件切换

最新推荐文章于 2024-03-11 11:12:35 发布
最新推荐文章于 2024-03-11 11:12:35 发布
阅读量797 收藏
点赞数
分类专栏： Vue.js 文章标签： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34979346/article/details/99596691
版权

我们用组件想达到的效果如下：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" >

   <link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script>
    <!--两个组件模板得定义如下-->
      <template  id="tmp1">  
        <h1>登录页面</h1>      
    </template>
     <template  id="tmp2">
        <h1>注册页面</h1>

    </template>
<style>
</style>
</head>
<body>
<div id="pp"  >
    <!--定义两个链接并用click 触发事件-->
    <a href="" @click.prevent="flag=true" >登录</a>
    <a href="" @click.prevent="flag=false">注册</a>

<!--使用模板， 并使用v-if 和v-else 控制-->
    <login v-if="flag"></login>
    <register v-else="flag"></register>

</div>
<div>
    <script>
        Vue.component('login',{
            template: '#tmp1'    //定义两个组件， 模板放到script外边
        })
         Vue.component('register',{
            template: '#tmp2'
        })
          var vue=new  Vue(
              {
                  el: '#pp',
                  data: {
                      id: '',
                      name: '',
                      flag: true
                  }
              }
        )
    </script>
</div>
</body>
</html>
上海_彭彭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
10-17
vue中v-if 和v-else-if在页面加载的时候，不满足条件的标签会加载然后再消失掉，如果要解决这个问题，下面小编给大家带来了实例代码，需要的朋友参考下吧
Vue——03-02条件判断v-if、v-else if、v-else if以及demo切换按钮
NanChen的博客
10-20 868
v-if用于条件判断，判断dom元素是否显示 例：判断学生成绩 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <h2 v-if="fen>90">优异</h2> <h2
vue.js 学习第一天：v-if用法，@click切换以及过滤器使用和计算
weixin_34403693的博客
07-08 1218
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="...
Vue - v-if和v-else-if和v-else的使用
最新发布
2202_75871191的博客
03-11 1136
v-bind:或:,v-on:或@,v-for,v-if,v-show,v-model。2.不同点：v-if存在或不存在，v-show展示或不展示。v-if和v-for在vue2或vue3中都不要同时使用，v-else,v-cloak,v-once，v-pre不需要带值。当v-if后面表达式的值为false的时候显示v-else所在的元素。当v-if后面表达式的值为true的时候显示v-if所在的元素。在vue3中v-if比v-for优先级高。v-if和v-for优先级和使用事项。
Vue模板语法（上）
laoluobo76的博客
09-16 176
一、文本 1、vue对象显示：{{}} 在html中通过{{}}（双大括号）中可以把Vue对象中的数据插入到网页中。并且只要Vue对象上对应的值发生改变了，那么html中双大括号中的值也会立马改变。 <div id="app"> <p>{{username}}</p> <!--改变一次就改不回来了--> <button v-on:click="change">点击修改</button> </div&gt
Vue.js知识—— v-if && v-else、v-show、v-for、购物车案例
xiaotangyu7dong的博客
08-26 560
Vue.js知识v-if && v-else用户登录切换的案例v-showv-for数组中哪些方法是响应式的购物车案例 v-if && v-else <body> <div id="app"> <h2 v-if="isShow">{{message}}</h2> <h2 v-else>如果信息为false，就显示我</h2> </div> <script sr
Vue.js：v-text 和v-html（解析）、v-show和v-if（控制标签显示或隐藏）、Vue指令：v-for（遍历）
qq_58946786的博客
05-09 1583
Vue.js从基础入门到实战5：v-text 和v-html（解析）、v-show和v-if（控制标签显示或隐藏）、Vue指令：v-for（遍历）
前端v-if 和 v-else 显示与隐藏的使用
m0_49714202的博客
02-19 1005
totalData这个为获取的数组 v-if =“totalData” 和 v-else 配合使用totalData这个位数组，显示与隐藏 刷新的时候先显示v-else 后显示 v-if 如果totalData数据为0的时候就显示v-else空白内容 ** 语法结构: ** <div> <template v-if="totalData"> <div>123</div> </template> .
vue中v-if和v-else的用法
你喜欢大熊猫嘛
01-02 1173
vue，v-if,v-else的使用方法。
text html js中增加if判断,Vue.js前端框架系统学习（4）——Vue指令之v-text,v-html,v-if,v-show...
weixin_36108931的博客
06-18 205
写在前面的话：继续上一篇文章，来学习一下vue的指令。指令指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。常用的Vue指令：v-textv-htmlv-bindv-onv-modelv-for...
【vue】v-if、v-else-if、v-else：控制组件之间的显示切换
weixin_39266845的博客
07-27 497
【vue】v-if、v-else-if、v-else：控制组件之间的显示切换
对vue v-if v-else-if v-else 的简单使用详解
10-17
今天小编就为大家分享一篇对vue v-if v-else-if v-else 的简单使用详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue.js使用v-if实现显示与隐藏功能示例
10-18
主要介绍了vue.js使用v-if实现显示与隐藏功能,结合简单实例形式分析了使用v-if进行判断实现元素的显示与隐藏功能,需要的朋友可以参考下
vue.js 使用v-if v-else发现没有执行解决办法
10-19
主要介绍了vue.js 使用v-if v-else发现没有执行解决办法的相关资料,需要的朋友可以参考下
前端应用_Vue_两种方法 设置 router-link 样式.
热门推荐
上海 彭彭
08-17 1万+
当我们点击 展示相应组建， 标签会加个class 属性，如图， 如果想高亮就需要 重写这个样式 <style> .router-link-active{ background-color: green; font-size: larger; color: aliceblue } </style> 我们也可以自定义一下， 在 rou...
前端应用_Vue_利用indexOf 和forEach ， filter 两种方法r进行搜索条件的过滤
上海 彭彭
08-08 7777
indexOf() 返回某个指定的字符在某个字符串中首次出现的位置。如果没有找到就返回-1； 一般可以用作查询。 indexOf() 方法对大小写敏感！所以之前你要把所有查询到内容变为小写。var str=str.trim().toLowerCase() var str=“Hello World!” str.indexOf(“Hello”) —0 str.indexOf(“world”) ...
【前端】element 改变icon图标大小，颜色
上海 彭彭
01-05 4415
<i class="el-icon-s-data" style="color:blue;font-size:100%"></i> color 可以动态取值，改变颜色，font-size 可以改变图表的大小
前端应用_Vue_vue-router 用router-link代替a 标签，设置默认的路由
上海 彭彭
08-17 3728
之前 用 a标签 ，每次都需要在href 里面添加 #， 用router-link 可以避免。 <router-link to='/login' tag="span">登录</router-link> <router-link to='/registe' tag="span">注册</router-link> 我们想设置默认路由显示指定的...
如何使原生html实现v-if功能
07-15
`v-if`是Vue.js框架提供的条件渲染指令，用于根据达式的真假来决定是否渲染特定的元素或组件。而原生的HTML并没有类似的指令来实现条件渲染。但是，你可以使用JavaScript来实现类似的功能。 以下是一种使用原生HTML...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值