<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>vue</title>

         <style>

             .active {

                 color:red

             }

         </style>

     </head>

     <body>

         <div id="app">

             <div v-if="show">{{msg}}</div>

             <div v-show="show">{{msg}}</div>

         </div>

         <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->

         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

         <script>

             var app = new Vue({

                 el: '#app',

                 data: {

                     msg:'hello world',

                     show:false

                 },

                 methods: {

                 }

             })

         </script>

     </body>

 </html>

v-if 将dom结构删除，添加

v-show 修改display为true和false

两个都可以用的情况下v-show的性能更高些

vue 条件渲染v-if v-show的更多相关文章

  1. Vue条件渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08 一 v-if显示单个元素 注意else只能跟在v-if或者v-s ...

  2. Vue#条件渲染

    根据不同的条件,响应不同的事件. https://jsfiddle.net/miloer/zed5p1r3/ 可以用template来包装元素,当然浏览器的最终渲染结果不会包含它.我觉得主要用它来自定 ...

  3. [vue]vue条件渲染v-if(template)和自定义指令directives

    条件渲染: v-if/template <div id="app"> <h1>v-show: display: none</h1> <di ...

  4. vue 条件渲染与列表渲染

    本文是对官方文档的整理 因为 v-if 是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v ...

  5. (尚008)Vue条件渲染

    1.test008.html <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...

  6. vue 条件渲染 v-if v-show

    1.要点 1.1 v-if     条件性地渲染一块内容 <h1 v-if="awesome">Vue is awesome!</h1> 附带  /  v- ...

  7. vue条件渲染2

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. vue 条件渲染方式

    1.通过class绑定 <div :class="{'div-class': this.align == 'center'}"></div> 对应的css ...

  9. vue.js选择if（条件渲染）详解

    vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. java中wait()和sleep()的区别

    前言 以前只知道一个结论,但是没法理解,现在水平上来了,自己代码中写了一个验证的方法. 1.先上结论:wait()会释放持有的锁,sleep()不会释放持有的锁 2.验证:看代码运行结果. packa ...

  2. jQuery取值/赋值常见方法收集

    1.文本取值.赋值 $("#id").attr("value"); $("#id").val(); $("#id).attr(&q ...

  3. CUDA学习之一：二维矩阵加法

    今天忙活了3个小时,竟然被一个苦恼的CUDA小例程给困住了,本来是参照Rachal zhang大神的CUDA学习笔记来一个模仿,结果却自己给自己糊里糊涂,最后还是弄明白了一些. RZ大神对CUDA关于 ...

  4. JUC线程池

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11443644.html newFixedThreadPool 重用指定数目(nThreads)的线程, ...

  5. leetcode骚题目列表

    114,二叉树原地前序遍历转链表 令人不舒服的空间限制 4,O(logn)寻找两个数组的中位数 感觉诡异又很其妙的二分 279,判断一个数可拆成最少几个平方数的和 有O(n)解法,如果把sqrt视为O ...

  6. Adobe 2019 全家桶 Mac 版（最新版）

    经过不断的改革换新,Adobe2019系列已经全面来袭.在软件更新的同时,激活工具也不断的完善!小编带来的是Adobe2019注册机专门为同系列软件量身定做的注册破解工具!   ▌软件下载-关注公众号 ...

  7. 【Beta阶段】第十一次Scrum Meeting!

    第十一周会议记录 [Beta阶段]第十一次Scrum Meeting! 一.每日任务内容 本次会议为第十一次Scrum Meeting会议~ 本次会议主要探讨了各自进展以及后续要继续开展的工作. 小组 ...

  8. 使用vue完成一个分页效果

    基于 element-ui 分页组件实现分页效果 效果如下: 使用说明: 0.首先在头部引入需要的外部文件 1.从element官方网页中复制想要的组件代码直接放入body中 2.编写逻辑代码 3.完 ...

  9. Linux虚拟机网络连接的三种方式

    Bridge桥接模式.NAT模式.Host-only仅主机模式: 桥接模式:虚拟机使用真实网卡进行通信,配置简单:只要和真实计算机在同一个网段内,就可以直接通信:局域网内如果有其他计算机,也可以进行访 ...

  10. 【SQL】链接服务器

    最近做项目,需要对两个数据库进行同步操作,所以采用在Server SQL中建立链接服务器方式实现. 链接服务器,可以直接访问/操作其他服务器上的数据库表. 1.连接SQL Server链接服务器 EX ...