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. python3（十） iteration

    d = {'a': 1, 'b': 2, 'c': 3} for key in d: print(key, end=' ') # a b c dict的存储不是按照list的方式顺序排列,所以,迭代出 ...

  2. hadoop(四)centos7克隆|静态ip|机器名|映射关系|别名配置(完全分布式准备一）|6

    hadoop完全分布式准备工作 克隆默认基础虚拟机三台102/103/104目标:在win10主机上能连上这三台机器,三台机器之间可以互相ping通,用机器名也可ping通.基础虚拟机:创建了文件op ...

  3. c++存储区

    全局变量与静态变量区.常量区.局部变量区(栈).动态存储区(堆).自由存储区 1.全局变量与静态变量区->存放全局变量.静态变量,程序运行结束后释放 2.常量区->存放常量 3.局部变量区 ...

  4. java 方法 在jvm中的调用

    java 某个类的几个对象,这些对象调用类中一个函数,是各自拥有自己的函数代码还是使用同一段代码?30 1.java 某个类的几个对象,这些对象调用类中一个函数(普通的函数),是各自拥有自己的函数代码 ...

  5. Css3 新增的属性以及使用

    Css3基础操作 . Css3? css3事css的最新版本 width. heith.background.border**都是属于css2.1CSS3会保留之前 CSS2.1的内容,只是添加了一些 ...

  6. matlab计算LZ复杂度

    我这个计算得14通道,每个通道截取3000个数据得复杂度,最后将计算得出得数据存储到本地txt文档中 function LZC(data) % 计算一维信号的复杂度 % data时间序列 % lzc: ...

  7. Linux下安装python3环境搭建

    Linux下python3环境搭建 Linux安装软件有哪些方式? rpm软件包 手动安装 拒绝此方式 需要手动解决依赖关系 yum自动化安装 自动处理依赖关系 非常好用 源代码编译安装,可自定义的功 ...

  8. Go gRPC进阶-go-grpc-middleware使用（八）

    前言 上篇介绍了gRPC中TLS认证和自定义方法认证,最后还简单介绍了gRPC拦截器的使用.gRPC自身只能设置一个拦截器,所有逻辑都写一起会比较乱.本篇简单介绍go-grpc-middleware的 ...

  9. python与excel的关系；铁打的python流水的excel

    现在很多行业,都离不开用Excel: 做财务的,要用Excel做报表:做物流的,会用Excel来跟踪订单情况:做HR的,会用Excel算工资:做分析的,会用Excel计算数据做报表.不知道你有没有这样 ...

  10. 移动端Vue组件库-Vant学习

    全局引入 import Vant from 'vant'; //嫌麻烦就全部一次导出,虽然包会稍微有点大 import 'vant/lib/index.css'; //注意导入全局的这个css,否则布 ...