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. CH5105 Cookies （线性dp）

    传送门 解题思路: 贪心的想,贪婪值越大的孩子应该分得更多的饼干,那么先sort一遍在此基础上进行dp.最直观的方向,可以设dp[i][j]为前i个孩子一共分得j块饼干的怨恨最小值.然后转移第i+1个 ...

  2. python3（十六） sorted

    # sorted()函数list进行排序: L = sorted([36, 5, -12, 9, -21]) print(L) # [-21, -12, 5, 9, 36] # 可以看到默认是按照升序 ...

  3. coding++：jdk1.7 HashMap 的get()和put() 源码

    HashMap的概述:    基于哈希表的 Map 接口的实现.    此实现提供所有可选的映射操作,并允许使用 null 值和 null 键. (除了非同步和允许使用 null 之外,HashMap ...

  4. scrapy版本爬取某网站，加入了ua池，ip池，不限速不封号，100个线程爬崩网站

    目录 scrapy版本爬取妹子图 关键所在下载图片 前期准备 代理ip池 UserAgent池 middlewares中间件(破解反爬) settings配置 正题 爬虫 保存下载图片 scrapy版 ...

  5. 数据结构和算法(Golang实现)(4)简单入门Golang-结构体和方法

    结构体和方法 一.值,指针和引用 我们现在有一段程序: package main import "fmt" func main() { // a,b 是一个值 a := 5 b : ...

  6. OS X10.10.3正式版和Xcode 6.3正式版下载

    4.09日,OS X10.10.3 正式版 IOS8.3 正式版和 Xcode 6.3 正式版在今天发布,这是 2015 年里面,IOS 系统和 Mac OS 系统,以及 IOS 和 Mac OS 专 ...

  7. Redis linux 下安装

    Redis linux 下安装 下载Redis安装包,可以从Redis中文网站中下载 下载地址:http://www.redis.cn/download.html Redis4.0 稳定版本 使用&l ...

  8. 面试 HTTP ，99% 的面试官都爱问这些问题

    HTTP 和 HTTPS 的区别 HTTP 是一种 超文本传输协议(Hypertext Transfer Protocol),HTTP 是一个在计算机世界里专门在两点之间传输文字.图片.音频.视频等超 ...

  9. stand up meeting 12/24/2015 && end sprint1

    part 组员                工作              工作耗时/h 明日计划 工作耗时/h    UI 冯晓云  解决单词本显示页面的问题    4 完善显示页面的功能   4 ...

  10. 为什么选择python？

    Why python? 那些最好的程序员不是为了得到更高的薪水或者得到公众的仰慕而编程,他们只是觉得这是一件有趣的事情. —— Linux 之父 Linux Torvalds 作为一个使用主义的学习者 ...