<!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. HTTP请求的python实现（urlopen、headers处理、 Cookie处理、设置Timeout超时、 重定向、Proxy的设置）

    python实现HTTP请求的三中方式:urllib2/urllib.httplib/urllib 以及Requests urllib2/urllib实现 urllib2和urllib是python两 ...

  2. ubuntu安装成功之后需要做些什么？

    1.安装VMtool 1.1打开虚拟机之后-> 安装VMtool 1.2 点击之后,桌面就会出现一个VMtool光驱文件,如果提示光驱被占用就先用root登录 1.3在命令行挂载 sudo mo ...

  3. Python爬虫学习==>第一章：Python3+Pip环境配置

    前置操作 软件名:anaconda  版本:Anaconda3-5.0.1-Windows-x86_64清华镜像  下载链接:https://mirrors.tuna.tsinghua.edu.cn/ ...

  4. Metinfo5.1 /include/common.php 变量覆盖+SQL注入漏洞

  5. PTA(Basic Level)1029.旧键盘

    旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及实际被输入的文字,请你列出肯定坏掉的那些键. 输入格式: 输入在 2 行中分别给出应该输入的文字.以及 ...

  6. [转帖]docker清理日志

    docker清理日志 2017年05月03日 10:37:27 不想当码农的程序员 阅读数 12827    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn. ...

  7. Spring实现构造注入

    Spring通过setter访问器实现对属性的赋值,这种做法称为设值注入:Spring还提供了通过构造方法赋值的能力,称为构造注入.使用设值注入时,Spring通过JavaBean的无参构造方法实例化 ...

  8. [LGP2791] 幼儿园篮球题

    你猜猜题怎么出出来的? 显然第\(i\)场的答案为 \[ \frac{1}{\binom{n_i}{m_i}\binom{n_i}{k_i}}\sum_{x=0}^{k_i}\binom{n_i}{m ...

  9. js中的alert弹出框文字乱码解决方案

    使用如下代码即可: echo '<html>'; echo '<head><meta http-equiv="Content-Type" conten ...

  10. file_put_contents实现内容追加

    file_put_contents("test.txt", "This is another something.", FILE_APPEND); FILE_A ...