<!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. 惊讶！我定的日志规范被CTO在全公司推广了

    打印日志是一门艺术,但长期被开发同学所忽视.日志就像车辆保险,没人愿意为保险付钱,但是一旦出了问题都又想有保险可用.我们打印日志的时候都很随意,可是用的时候会吐槽各种 SB 包括自己!写好每一条日志吧 ...

  2. 使用shell脚本常见的一些问题

    Jdk版本:jdk-8u102-linux-x64 Tomcat版本:apache-tomcat-7.0.92 Redis版本:redis-5.0.0 由于公司项目的需要,要在多台服务器上面部署一些应 ...

  3. keys随机生成

    随机keys生成 const fs=require('fs'); const KEY_LEN=1024; const KEY_COUNT=2048; const CHARS='abcdefghijkl ...

  4. python基础 --- 难点重点

    循环嵌套 # 打印九九乘法表 for row in range(1,10): # 行与列相乘 for col in range(1,row+1): print(col,'*',row,'=',row ...

  5. 更改默认浏览器（Windows7）

    更改默认浏览器 第一个方法(最好用): 第一步,先点击左下角WIN 然后点默认程序(画框框的图上) 第二步骤,来到控制面板主页,点击设置程序 第三步骤,左键单击选择要设置为默认浏览器的程序(我用360 ...

  6. 【Python开发】Url中文字符时记得转码edcode("utf-8")

    在url中使用中文其实是一个坏习惯,会带来一系列的转码问题, 我更喜欢英文译名或者id来标识某个uri.但是现实往往是残酷的, 特别是在我们调用别人服务时候,有时候被逼无奈使用中文URL. Pytho ...

  7. C学习笔记-文件操作

    文件操作大致分三步 打开文件 读写文件 关闭文件 二进制和文本模式的区别 在windows系统中,文本模式下,文件以"\r\n"代表换行.若以文本模式打开文件,并用fputs等函数 ...

  8. Java小知识---Java请求一个URL。获取网站返回的数据

    对url发送请求,获得返回值: public static String SendGET(String url,String param){ String result="";// ...

  9. 【转贴】优秀的龙芯Docker虚拟机解决方案

    优秀的龙芯Docker虚拟机解决方案 http://www.loongson.cn/m/view.php?aid=836 时间:2019-05-23 15:03  来源:未知   作者:龙芯中科    ...

  10. sql server 查询某段日期某段时间内的数据

    如我要取8月1号到8月30号之间的早上7点半到晚上八点半这段时间内的数据. SELECT * FROM tableName AS tWHERE t.create_date BETWEEN '2017- ...