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. 类 文件 右下角呈现 红色小圆圈，里面有一个J 标记

    intellj(idea) 项目中类 文件 右下角呈现 红色小圆圈,里面有一个J 标记,表明此为 未设置为源文件,没有编译,本来应该是属于源文件的,结果现在没有被标记为源文件,也就没法编译了.

  2. web.xml配置参数context-param和init-param的区别

    web.xml配置参数context-param和init-param的区别 (2009-04-13 10:29:01) 转载▼ 标签: 杂谈 分类: JavaEE web.xml里面可以定义两种参数 ...

  3. AJ学IOS（25）UI之触摸事件

    AJ分享,必须精品 iOS中的事件 在用户使用app过程中,会产生各种各样的事件;iOS中的事件可以分为3大类型: 响应者对象–UIResponder 在iOS中不是任何对象都能处理事件,只有继承了U ...

  4. d3限制范围缩放和平移升级到版本4

    感谢您提供帮助以更新下面的代码以在版本4中工作.我已将zoom.behaviour更改为d3.zoom,但我不清楚所需的其他更改.看起来比v3还要复杂! <!DOCTYPE html> & ...

  5. cxGrid增加一栏显示checkBox的设置方法

    鉴于本人首次设定cxGrid的CheckBox的时候费了很大劲,发现很多人都会碰到这个问题,现在总结一下,以供各位互相学习借鉴. 步骤如下(不分先后): 1. cxGrid添加完自己所需的所有字段后, ...

  6. python实现双向链表的操作

    双向链表 双向链表又叫做双链表,每个节点有两个指针域和一个数据域.prev指针域指向前一个节点,next指针域指向下一个节点.注意,第一个节点的prev指针域指向空值,最后一个节点的next域也是指向 ...

  7. B. 蚂蚁觅食（二）

    B. 蚂蚁觅食(二) 单点时限: 1.0 sec 内存限制: 512 MB 一只饥饿的小蚂蚁外出觅食,幸运的的小蚂蚁发现了好多食物.但是这些食物位于一个N∗M的方格魔法阵的右下角,而小蚂蚁位于方格法阵 ...

  8. Celery实现周期任务

    这个翻译之后居然叫芹菜~~最近Django框架需要涉及到执行周期任务~~上网搜了下其实还挺多的(django_crontab:这个学习周期短,但是发现不仅麻烦还不好用啊).(apscheduler,简 ...

  9. mysql相关面试题（一）

    1.主键自增,姓名字段重复.删除重复的姓名数据,只留一条 -- Every derived table must have its own alias 子查询要起别名 -- 思路:分组后只会显示一条, ...

  10. vue2.x学习笔记（十二）

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12592256.html. 组件基础 组件化是vue的一个重要特性,也是vue学习中非常重要的一个知识点. 基础示例 ...