<!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. webpack第一节(1)

    跟着慕课网的老师做了下笔记 webpack是一个前端打包工具 它可以优化网页.例如 页面模块化加载.图片优化.css.js压缩等等. 模块化加载也就是懒加载,按需加载,以前的模式是所以得css写在一起 ...

  2. TCP/IP的分层管理_01

    1.TCP/IP协议族里最重要的一点就是分层.TCP/IP协议族按层次分别分为以下4层:         应用层,传输层,网络层和数据链路层.           应用层:决定了向用户提供应用服务时通 ...

  3. Spark开发环境搭建和作业提交

    Spark高可用集群搭建 在所有节点上下载或上传spark文件,解压缩安装,建立软连接 配置所有节点spark安装目录下的spark-evn.sh文件 配置slaves 配置spark-default ...

  4. Eu

    <parent> <artifactId>microservice-cloud-01</artifactId>   <groupId>com.mengx ...

  5. 文本处理工具——sed基础

    一sed介绍 三剑客是grep,sed,awk,功能都很强大. 其中sed是Stream EDitor,流编辑器 行,编辑器的简写,它一次处理一行内容. sed的强大在于可以对文件进行修改,很适合在脚 ...

  6. Ubuntu下Arm-Linux-GCC交叉编译环境的搭建

    1.下载arm-linux-gcc-3.4.1.tar.bz2到临时的目录下. 2.解压 arm-linux-gcc-3.4.1.tar.bz2 #tar -jxvf arm-linux-gcc-3. ...

  7. kubernetes集群中移除Node

    例如要在集群中移出node2节点1)在master节点上执行: kubectl drain node2 --delete-local-data --force --ignore-daemonsets ...

  8. html生成pdf

    /** * 生成pdf * @param string $html 需要生成的内容 */ function pdf($html='<h1 style="color:red"& ...

  9. 对于页面上下载pdf或者excel按钮的实现

    这个主要是通过      window.open(url + params) url后台给存放的路径,params是参数

  10. Angular项目中迭代生成的树，激活选中的节点，并将节点数据发送到父节点

    从后台返回的数据,还有多层子节点,需要一个生成树的组件,如果直接在页面上写循环来拼接感觉会很麻烦,因为数据的层级结构不固定. 参考网上其他人的方法,整理如下: 1. 创建一个用于循环迭代的组件,在父组 ...