<!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <title>Document</title>

     <!--1.导入Vue的包-->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></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:true

         },

         methods:{

          /* toggle(){

             this.flag=!this.flag

           }*/

         }

           });

       </script>

   </body>

 </html>

第二章 Vue快速入门-- 19 v-if和v-show的使用和特点的更多相关文章

  1. 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. 第二章 Vue快速入门-- 28 自定义按键修饰符

    事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. 第二章 Vue快速入门-- 27 字符串的padStart方法使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. 第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. 第二章 Vue快速入门--20 品牌案例-完成品牌列表的添加功能+ 21 品牌案例-根据Id完成品牌的删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. 第二章 Vue快速入门--14 使用v-model实现计算器的案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. 第二章 Vue快速入门--12 事件修饰符的介绍

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. 【转】HBASE Region in Transition issue on Master UI

    [From]https://community.hortonworks.com/content/supportkb/244808/hbase-region-in-transition-issue-on ...

  2. PHP define defined const

    define 定义常量,常量一旦被定义,在脚本执行期间就不能再改变或者取消定义 常量默认大小写敏感.通常常量标识符总是大写的 与变量的区别: 1.常量前面没有美元符号($) 2.常量只能通过defin ...

  3. 【VS开发】【Linux开发】【DSP开发】如何截获以太网帧并解析

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  4. java初学者编译简单的计算机

    package com.yj.test; import java.awt.BorderLayout; import java.awt.Font; import java.awt.GridLayout; ...

  5. 什么是云数据库 HBase 版

    云数据库 HBase 版(ApsaraDB for HBase)是基于 Hadoop 的一个分布式数据库,支持海量的PB级的大数据存储,适用于高吞吐的随机读写的场景.目前在阿里内部有数百个集群,100 ...

  6. 注入(Injection)

    注入(Injection)是: Java EE提供了注入机制,使您的对象能够获取对资源和其他依赖项的引用,而无需直接实例化它们.通过使用将字段标记为注入点的注释之一来装饰字段或方法,可以在类中声明所需 ...

  7. celery异步发送邮件

    利用Django框架发送邮件的详细过程,在前两天的博客中有所记录,但是单纯的那样发邮件是有非常大的问题的,这就需要celery异步发送来解决 首先我们来看一下邮件发送的过程: Django网站先发送到 ...

  8. 从0开始入门ssm-crm系统实战

    喜欢就点个赞呗! GitHub项目ssm-learn-crm show me the code and take to me,做的出来更要说的明白 1.1 克隆 git clone https://g ...

  9. sql--index 索引

    CREATE INDEX 语句用于在表中创建索引. 在不读取整个表的情况下,索引使数据库应用程序可以更快地查找数据. 索引 您可以在表中创建索引,以便更加快速高效地查询数据. 用户无法看到索引,它们只 ...

  10. QT多线程同步之QWaitcondition

    使用到多线程,无可避免的会遇到同步问题,qt提供几种同步线程的方法,在这里讲一下QWaitcondition的简单使用. 一.QWaitcondition,是通过一个线程达到某种条件来唤起另一个线程来 ...