v-if和v-show的异同

女爷i 2022-02-13 07:49 145阅读 0赞

v-if：能够直接销毁和重建dom达到元素显示和隐藏的效果

v-show：修改元素的displaycss数据让其显示或隐藏

<!DOCTYPE html>
    <html lang="en">
      <head>
        <title>v-show指令</title>
        <meta charset="utf-8" />
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
      </head>
      <body>
        <div id="app">
          <h1 v-show="yes">Yes</h1>
          <h1 v-show="no">No</h1>
          <h1 v-show="age > 25">Age: {
       { age }}</h1>
        </div>
        <div id="a">
          <h1 v-if="yes">Yes</h1>
          <h1 v-if="no">No</h1>
          <h1 v-if="age > 25">Age: {
       { age }}</h1>
        </div>
    
        <script> var app = new Vue({ el: "#app", data: { yes: true, //值为真 no: false, //值为假 age: 28 } }); var a = new Vue({ el: "#a", data: { yes: true, //值为真，插入元素 no: false, //值为假，不插入元素 age: 28 } }); </script>
      </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70]: /images/20220213/eb6996aa084e4cd888aa7938b3e7a12d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，145人围观）

还没有评论，来说两句吧...

相关阅读

相关 Jsp和Servlet的异同

Jsp和Servlet的相同点： jsp是对servlet的扩展，可以看做是特殊的servlet。只要jsp可以完成的工作，使用servlet也可完成。

快来打我*/ 2023年10月05日 08:44/ 0 赞/ 141 阅读

相关 WSGI和ASGI的异同

WSGI和ASGI，都是基于Python设计的网关接口（Gateway Interface,GI） WSGI是基于http协议模式开发的,不支持websocket，而ASGI

短命女/ 2022年09月17日 03:13/ 0 赞/ 362 阅读

相关 VIF检验相关性

`VIF`可以用来度量多重共线性问题， V I F j = 1 1 − R j 2 \\quad \\mathrm\{VIF\}\_\{j\}=\\frac\{1\}\{1-R

冷不防/ 2022年09月12日 02:55/ 0 赞/ 370 阅读

相关 instanceType和id的异同

今天在自己学习设计模式的过程中发现一个问题在本类中返回一个对象如果该对象不是本类的对象那么必须使用id类型。查看官方文档，在这两者之间存在两个不同一个相同。

桃扇骨/ 2022年08月10日 03:59/ 0 赞/ 234 阅读

相关队列和栈的异同

1. 队列先进先出，栈先进后出 2. 接口实现的异同队列和栈同属于Java合集框架，由Collcetion接口实现，队列由Queue接口实现，栈由List接口实现

亦凉/ 2022年05月21日 04:56/ 0 赞/ 220 阅读

相关 Hadoop和Spark的异同

谈到大数据，相信大家对Hadoop和Apache Spark这两个名字并不陌生。但我们往往对它们的理解只是提留在字面上，并没有对它们进行深入的思考，下面不妨跟我一

爱被打了一巴掌/ 2022年05月14日 04:26/ 0 赞/ 276 阅读

相关 @Autowired和@Resource的异同

直接用表格表说明比较直观： <table> <tbody> <tr> <td style="width:119px;"> </td> <t

待我称王封你为后i/ 2022年04月17日 05:41/ 0 赞/ 323 阅读

相关 Exception和Error的异同

Exception和Error的异同其实这是一个常见的面试题 1. 首先，两者都及继承了Throwable类，Throwable类是所有异常类的顶级父类。在java

喜欢ヅ旅行/ 2022年04月01日 03:36/ 0 赞/ 285 阅读

相关 localStorage和sessionStorage的异同

文章目录相同点相同的使用方法不同点存储时效不同容量大小不同相同点相同的使用方法以下方法或属

﹏ヽ暗。殇╰゛Y/ 2022年02月28日 06:12/ 0 赞/ 400 阅读

相关 session和cookie的异同

session和cookie的异同 session和cookie都是会话(Session)跟踪技术。Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端

布满荆棘的人生/ 2022年02月15日 00:58/ 0 赞/ 301 阅读