<!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. 40G传输技术浅析

    采用40G传输技术给运营商带来的好处 - 同样的带宽,更低的硬件成本.由于目前的光电器件工艺已臻于成熟,质量更为可靠,使40G的商用具有了必要的前提.同样是40G容量,器件的数量大致只有4个10G光接 ...

  2. 学习ansible笔记1

    ansible的特点: -- 模块化设计 -- 仅需要ssh和Python即可以使用 -- 无客户端 -- 功能强大,模块丰富 -- 上手容易门槛低 -- 基于python开发,做二次开发更容易 -- ...

  3. 安卓的一些UI美化框架的使用

    目录 一.前言 二.Android-Bootstrap 三.Sweet Alert Dialog 四.ExplosionField 一.前言 在这里记录一些用到过的觉得还算不错的UI第三方开源美化框架 ...

  4. Leetcode之动态规划（DP）专题-712. 两个字符串的最小ASCII删除和（Minimum ASCII Delete Sum for Two Strings）

    Leetcode之动态规划(DP)专题-712. 两个字符串的最小ASCII删除和(Minimum ASCII Delete Sum for Two Strings) 给定两个字符串s1, s2,找到 ...

  5. 关于虚拟机docker 启动mysql 启动成功但未挂载到端口

    首先排查了防火墙和其他权限相关问题 然后检查了mysql 用户权限问题 docker logs 查看日志 正常应该是到3306 问题是我的mysql my.cnf 文件是挂在在本地.当第二次启动容器时 ...

  6. [转帖]linux下使用 du查看某个文件或目录占用磁盘空间的大小

    linux下使用 du查看某个文件或目录占用磁盘空间的大小 du -ah --max-depth= 去年用过一次 后来忘记了.. 命令这个东西 熟能生巧.. https://www.cnblogs.c ...

  7. 前端-CSS-更改标签样式-长宽字体-背景-边框-显示方式-定位-透明度-扩展点-02

    目录 控制标签元素样式 长宽属性.字体属性.文本对齐.文本装饰.首行缩进 背景属性.边框属性.圆角 display 显示方式 盒子模型 margin.padding... float浮动 overfl ...

  8. Java工具类-基于SnowFlake的短地址生成器

    Twitter的SnowFlake算法,使用SnowFlake算法生成一个整数,然后转化为62进制变成一个短地址URL /** * Twitter的SnowFlake算法,使用SnowFlake算法生 ...

  9. 牛客 2C 圈圈

    题面: shy有一个队列a[1], a[2],…,a[n].现在我们不停地把头上的元素放到尾巴上.在这过程中我们会得到n个不同的队列,每个队列都是a[k],a[k+1],…,a[n],a[1],…,a ...

  10. [Next] 服务端渲染知识补充

    渲染 渲染:就是将数据和模版组装成 html 客户端渲染 客户端渲染模式下,服务端把渲染的静态文件给到客户端,客户端拿到服务端发送过来的文件自己跑一遍 js,根据 JS 运行结果,生成相应 DOM,然 ...