<!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. [转]DesignWare是什么

    一.DesignWare是什么 摘自https://zhidao.baidu.com/question/473669077.html DesignWare是SoC/ASIC设计者最钟爱的设计IP库和验 ...

  2. An Easy Introduction to CUDA C and C++

    An Easy Introduction to CUDA C and C++ This post is the first in a series on CUDA C and C++, which i ...

  3. 【算法】一致性Hash算法

    一.分布式算法 在做服务器负载均衡时候可供选择的负载均衡的算法有很多,包括: 轮循算法(Round Robin).哈希算法(HASH).最少连接算法(Least Connection).响应速度算法( ...

  4. noi2019感想

    不知道怎么想的,我现在已经没有心情写一篇完整的游记了. 发挥的是真的太差,Day1该切的T2没有切掉,想的时候漏了一个性质,便由100->45. Day1的时间全花在了T3上,结果想歪了,最后只 ...

  5. [NOIP模拟测试31]题解

    A.math 考场乱搞拿了95,2333. 考虑裴蜀定理:$ax+by=z$存在整数解,当且仅当$gcd(a,b)|z$. 那么如果某个数能够被拼出来,就必须满足所有$a_i$的$gcd$是它的因子. ...

  6. objective-c: Functions and static keyword

    Functions function is a concept for C programming language, objective-c is entirely relies on C. To ...

  7. appium 链接真机运行时报错

    今天用appium链接真机时,碰到的第一个问题:Attempt to re-install io.appium.settings without first uninstalling.(这是日志中显示 ...

  8. java.net.BindException: Address already in use: 解决方法

    java.net.BindException: Address already in use: 解决方法   1. 执行cmd 2. cmd命令模式下输入netstat -ano,然后找到占用端口的那 ...

  9. python - 小米推送使用

    1. 小米文档及SDK下载 1.文档介绍 https://dev.mi.com/console/doc/detail?pId=863 sdk说明: 2.开发者需要登录开发者网站(申请AppID, Ap ...

  10. java入门经验分享——记面向对象先导课程学习感想

    选择在暑期学习面向对象先导课程的初衷是为大二下学期面向对象课程做一些铺垫,接触入门java语言.在接触java的过程中,就编程语言的学习方法而言,我从刚入学时的手慌脚乱四处寻求帮助到现在慢慢养成了自己 ...