vue 中的v-if和v-show

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

      <div id="app">

        <!-- <input type="button" value="toggle" @click="toggle"> -->

        <input type="button" value="toggle" @click="flag=!flag">

        <!-- v-if 的特点：每次都会重新删除或创建元素 -->

        <!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 -->

        <!-- v-if 有较高的切换性能消耗 -->

        <!-- v-show 有较高的初始渲染消耗 -->

        <!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show -->

        <!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if -->

        <h3 v-if="flag">这是用v-if控制的元素</h3>

        <h3 v-show="flag">这是用v-show控制的元素</h3>

      </div>

      <script>

        // 创建 Vue 实例，得到 ViewModel

        var vm = new Vue({

          el: '#app',

          data: {

            flag: false

          },

          methods: {

            /* toggle() {

              this.flag = !this.flag

            } */

          }

        });

      </script>

    </body>

</html>

学习vue第六节，v-if和v-show的更多相关文章

  1. 风炫安全WEB安全学习第二十六节课 XSS常见绕过防御技巧

    风炫安全WEB安全学习第二十六节课 XSS常见绕过防御技巧 XSS绕过-过滤-编码 核心思想 后台过滤了特殊字符,比如说

  2. 风炫安全Web安全学习第十六节课 高权限sql注入getshell

    风炫安全Web安全学习第十六节课 高权限sql注入getshell sql高权限getshell 前提条件: 需要知道目标网站绝对路径 目录具有写的权限 需要当前数据库用户开启了secure_file ...

  3. 一步一步学习Vue（六）

    本篇继续介绍vue-router,我们需要要完成这样个demo:<分页显示文章列表>:这里我们以博客园首页列表为例简化处理: 按照上图框选所示,简单分为蓝色部分文章组件(ArticleIt ...

  4. [ExtJS5学习笔记]第六节 Extjs的类系统Class System命名规则及定义和调试

    本文地址: http://blog.csdn.net/sushengmiyan/article/details/38479079 本文作者:sushengmiyan ----------------- ...

  5. 学习vue第七节，filter过滤器如何的使用

    vue 过滤器如何的使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 学习vue第五节，vue中使用class和style的css样式

    vue中使用class样式 数组 <h1 :class="['red', 'thin']">这是一个H1</h1> 数组中使用三元表达式 <h1 :c ...

  7. 学习Vue第四节，v-model和双向数据绑定

    Vue指令之v-model和双向数据绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  8. [struts2学习笔记] 第六节 struts2依赖的jar包还有Could not find action or result 错误解决

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/43272061 本文作者:sushengmiyan ------------------ ...

  9. HTML学习----------DAY2第六节

    在 HTML 文档中,标题很重要. HTML 标题 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的. <h1> 定义最大的标题.<h6 ...

随机推荐

  1. 创建 SysV 风格的 linux daemon 程序

    本文介绍如何使用 C 语言创建 Linux 系统中 SysV 风格的 daemon 程序.注意:这是一种旧式的 daemon 程序写法,进入 systemd 时代后是不需要通过这样的方式创建 daem ...

  2. jvm入门及理解（四）——运行时数据区（堆+方法区）

    一.堆 定义: Heap,通过new关键字创建的对象,都存放在堆内存中. 特点 线程共享,堆中的对象都存在线程安全的问题 垃圾回收,垃圾回收机制重点区域. jvm内存的划分: JVM内存划分为堆内存和 ...

  3. 列表推导式和seed（）的理解

    Table of Contents generated with DocToc 列表推导式和seed()的理解 对seed()的理解 列表推导式 第一种用法 第二种用法 列表推导式和seed()的理解 ...

  4. 安装Mathmatica

    MathMatica11.3版本 链接:https://pan.baidu.com/s/1YzQdgz4HxHd_xNwKoMX7lQ 提取码:mnr5 破解文件 链接:https://pan.bai ...

  5. H - Bear and Three Balls

    Limak is a little polar bear. He has n balls, the i-th ball has size ti. Limak wants to give one bal ...

  6. I - Fill The Bag codeforces 1303D

    题解:注意这里的数组a中的元素,全部都是2的整数幂.然后有二进制可以拼成任意数.只要一堆2的整数幂的和大于x,x也是2的整数幂,那么那一堆2的整数幂一定可以组成x. 思路:位运算,对每一位,如果该位置 ...

  7. api_DZFPKJ & api_DZFPCX

    AES加密算法的网站:http://www.ssleye.com/aes_cipher.html """ AES加密(加解密算法/工作模式/填充方式:AES/ECB/PK ...

  8. Python3使用 pytesseract 进行图片识别

    一.安装Tesseract-OCR软件 参考我的前一篇文章:Windows安装Tesseract-OCR 4.00并配置环境变量 二.Python中使用 需要使用 pytesseract 库,官方使用 ...

  9. linux 文件的查找和压缩

    1.使用 locate 命令 需要安装:yum install mlocate -y 创建或更新 slocate/locate 命令所必需的数据库文件:updatedb 作用:搜索不经常改变的文件如配 ...

  10. Flutter环境安装，ios真机调试

    MAC: 下载Flutter,官网的可能很慢.可以去我的网盘下载, 提取码: 3t6y. 下载完的包会在~/Downloads目录下,我们移到~/opt/flutter目录下. mkdir ./opt ...