<!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. NOIP2016D1T3 换教室 （概率DP）

    NOIP2016D1T3 换教室 题目大意:有n个时间段,每个时间段i有两个教室a[i],b[i]可以上课,如果不申请换教室就在教室a[i]上课,如果换教室就在b[i]上课.你最多只能换m次教室.教室 ...

  2. jsp获取url路径的方法

    如果你请求的URL是  http://localhost:8080/demo/Index.jsp request.getScheme() //输出:http request.getServerName ...

  3. jsp详解（3个指令、6个动作、9个内置对象、11个隐式对象）

    jsp概述SP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术.JSP实际上就是Servlet.    jsp=html+jav ...

  4. 【Linux】 Centos7 安装 mysql-8.0

    本文介绍使用rpm包安装mysql, 以 mysql-8.0.17-1.el7.x86_64.rpm-bundle.tar 为例: 1.下载 MySQL下载地址:https://dev.mysql.c ...

  5. 巴厘岛的雕塑（sculptures）

    巴厘岛的雕塑(sculptures) 印尼巴厘岛的公路上有许多的雕塑,我们来关注它的一条主干道. 在这条主干道上一共有 N 座雕塑,为方便起见,我们把这些雕塑从 1 到 N 连续地进行标号,其中第 i ...

  6. Nginx在Windows平台的配置

    Nginx在Windows平台的配置 能够使用Nginx搭建Tomcat集群,并完成负载均衡. 1.什么是Nginx 2.为什么使用Nginx 背景: 互联网飞速发展的今天,大用户量高并发已经成为互联 ...

  7. （转）使用OpenGL显示图像（七）Android OpenGLES2.0——纹理贴图之显示图片

    转:http://blog.csdn.net/junzia/article/details/52842816 前面几篇博客,我们将了Android中利用OpenGL ES 2.0绘制各种形体,并在上一 ...

  8. HTML-参考手册: 颜色混搭

    ylbtech-HTML-参考手册: 颜色混搭 1.返回顶部 1. HTML 颜色混搭 混搭两种颜色,并查看效果: 选择颜色:     #FF0000   #0000FF   顶部颜色:        ...

  9. Windows-右键菜单添加选项

    新建 add.reg 输入选项名和选项对应程序路径 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\选项名] [HKEY ...

  10. SQLSERVER 时间日期函数，查询今天日期、昨天、一个星期、半年前的数据

    今天的所有数据:select * from 表名 where DateDiff(dd,datetime类型字段,getdate())=0昨天的所有数据:select * from 表名 where D ...