<!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. python 读取文件时，精确的保留数据

    import numpy as npimport pandas as pd point = pd.read_csv('waypoint21.csv') with pd.option_context(' ...

  2. Win7 VS2012智能提示显示英文的处理办法

    其原因为.net的语言包没安装成功, 解决方法为 替换自己英文显示的,把C:\Windows\Microsoft.NET\Framework\v2.0.50727\zh-CN 目录的文件,替换到相应的 ...

  3. spring boot2.x集成spring security5与druid1.1.13(一)

    版本:         spring boot 2.1.2.RELEASE         druid-spring-boot-starter 1.1.13 步骤:        一.maven    ...

  4. html{-webkit-text-size-adjust:none;}（取消浏览器最小字体限制）

    2016年10月13日 09:31:58 ITzhongzi 阅读数 9409   1.当样式表里font-size<12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 ht ...

  5. uploadify的使用错误

    在看singwa的视频教程中,学习使用hui-admin模版,在使用uploadify插件上传图片中出现错误. ReferenceError: Can't find variable: $因为使用JQ ...

  6. django中初学常犯错误之梳理

    一,关于setting设置,1,两个INSRALLEN_APPS,需要将新建的app添加进去 2,需要再setting将html的路径拼接起来 二,urls.py 设置,from app名 impor ...

  7. QC增加Test、Defect字段

    QC--Tools--customization,在Project Entities中增加字段,在Project Lists中编辑Lookup List类型字段的指定值

  8. 框架-.NET：ASP.NET MVC

    ylbtech-框架-.NET:ASP.NET MVC ASP.NET MVC 是Windows系统下面的Web研发框架,有Microsoft提供.MVC顾名思义:Model, View, Contr ...

  9. 建立logback.xml 配合MDC 实现追踪

    <?xml version="1.0" encoding="UTF-8"?> <configuration debug="false ...

  10. Struts1.3——文件上传和下载

    1.Struts文件上传 在Web开发中,会经常涉及到文件的上传和下载,比如在注册账户的时候,我们需要上传自己的头像等. 我们可以利用Struts很方便地实现文件的上传. 1.1 开发步骤 现在,假设 ...