<!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. python计算机二级考试知识点——文件操作

    1. 文件的使用:文件打开.关闭和读写 python通过open函数打开一个文件,并返回一个操作文件的变量,语法形式如下: <变量名>=open(<文件路劲及文件名>,< ...

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

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

  3. MSIX 打包 DotNetCore 3.0

    使用 MSIX 打包 DotNetCore 3.0 客户端程序 如何你希望你的 WPF 程序能够以 Windows 的保护机制保护起来,不被轻易反编译的话,那么这篇文章应该能帮到你. 介绍# MSIX ...

  4. supervisor管理superset

    参考: https://blog.51cto.com/qiangsh/2153185 安装supervisor: pip install supervisor 停止supervisor管理的服务: [ ...

  5. Swagger中paramType

    paramType:表示参数放在哪个地方    header-->请求参数的获取:@RequestHeader(代码中接收注解)    query-->请求参数的获取:@RequestPa ...

  6. 2019icpc南昌邀请赛B Polynomial （拉格朗日插值法）

    题目链接:https://nanti.jisuanke.com/t/40254 题意: 思路: 这题要用到拉格朗日插值法,网上查了一下,找到一份讲得特别好的: -------------------- ...

  7. Linux 常用服务器命令

    1.查看端口号是否被占用 netstat -lnp|grep 端口 或 lsof -i :端口 2查看进程对应的端口号 netstat -nap | grep 进程号

  8. PTA(Basic Level)1077.互评成绩计算

    在浙大的计算机专业课中,经常有互评分组报告这个环节.一个组上台介绍自己的工作,其他组在台下为其表现评分.最后这个组的互评成绩是这样计算的:所有其他组的评分中,去掉一个最高分和一个最低分,剩下的分数取平 ...

  9. python函数 全局变量和局部变量

    li1=[1,2,3,4,5] str1='abc' def func1(): li1=[7,8,9] str1='efg' print(str1) func1() print(li1)#输出的结果为 ...

  10. Oracle 获取当前日期是月的第几周

    函数FUNC_GET_WEEKOFMONTH: IW 是年的自然周: WW是年的第一天起开始算7天为一周 FUNCTION FUNC_GET_WEEKOFMONTH (V_PSD DATE) RETU ...