v-show：通过切换元素的display CSS属性实现显示隐藏；

v-if：根据表达式的真假实现显示隐藏，如果隐藏，它绑定的元素都会销毁，显示的时候再重建；

<div id="one">

            <h1  v-show="false">欢迎来到perfect*博客园  A</h1>

            <h1  v-if="false">欢迎来到perfect*博客园    B</h1>

        </div>

我们可以通过定义一个属性进行控制显示与隐藏：

定义的属性：

<script>

            window .onload= () =>{

                new Vue({

                el:"#one",

                data:{

                    flag:true

                },

                methods:{

                }

            });

            }

        </script>

html:

<div id="one">

            <button @click="flag=!flag">click</button>

            <h1  v-show="flag">欢迎来到perfect*博客园  A</h1>

            <h1  v-if="flag">欢迎来到perfect*博客园    B</h1>

        </div>

v-else与v-elseif：都是与v-if配对使用；

vue中定义属性：

num：0

HTML中加入：

<button @click="num=1">--1--</button>

            <button @click="num=2">--2--</button>

            <button @click="num=-1">-- -1 --</button>

            <h2 v-if="num===1">篮球</h2>

            <h2 v-else-if="num===2">羽毛球</h2>

            <h2 v-else>其它</h2>

最终所有示例的代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>v-show和v-if的使用</title>

         <script src="../js/vue.js"></script>

         <script>

             window .onload= () =>{

                 new Vue({

                 el:"#one",

                 data:{

                     flag:true,

                     num:0

                 },

                 methods:{

                 }

             });

             }

         </script>

     </head>

     <body>

         <div id="one">

             <button @click="flag=!flag">click</button>

             <h1  v-show="flag">欢迎来到perfect*博客园  A</h1>

             <h1  v-if="flag">欢迎来到perfect*博客园    B</h1>

             <button @click="num=1">--1--</button>

             <button @click="num=2">--2--</button>

             <button @click="num=-1">-- -1 --</button>

             <h2 v-if="num===1">篮球</h2>

             <h2 v-else-if="num===2">羽毛球</h2>

             <h2 v-else>其它</h2>

         </div>

     </body>

 </html>

使用v-if、v-show、v-else-if、v-else代码

v-show v-if 的使用的更多相关文章

  1. 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage

    SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...

  2. 转：V$SQL,V$SQLAREA,V$SQLTEXT

    V$SQL*表用于查看Shared SQL Area中SQL情况 V$SQLTEXT V$SQLTEXT用途很简单,就是用来查看完整的SQL语句,V$SQL和V$SQLAREA只能显示1000 byt ...

  3. v$session & v$session_wait

    (1)v$session v$session视图记录了当前连接到数据库的session信息 Column Description SADDR session address SID Session i ...

  4. A discussion of Dead Connection Detection, Resource Limits, V$SESSION, V$PROCESS and OS processes

    A discussion of Dead Connection Detection, Resource Limits, V$SESSION, V$PROCESS and OS processes (文 ...

  5. 错误提示：Dynamic Performance Tables not accessible, Automatic Statistics Disabled for this session You can disable statistics in the preference menu,or obtanin select priviliges on the v$session,v$sess

    1.错误提示:Dynamic Performance Tables not accessible, Automatic Statistics Disabled for this session You ...

  6. 动态性能视图v$mystat,v$sesstat,v$statname

    视图说明: v$mystat-------> 当前会话统计 v$sesstat------> 按会话进行分组统计 v$sysstat-------> 当系统的整体统计 v$statn ...

  7. Oracle v$session/v$sql 表

    在本视图中,每一个连接到数据库实例中的 session都拥有一条记录.包括用户 session及后台进程如 DBWR, LGWR, arcchiver等等. V$SESSION中的常用列 V$SESS ...

  8. oracle常用视图v$mystat v$sesstat v$sysstat v$statname v$thread v$ parameter v$session v$process

    这两天看了盖国强老师的<<深入浅出>>,很佩服盖老师钻研的精神.书中常用到一个查询语句,为了获取当前会话的跟踪文件路径,sql如下: SELECT d.VALUE || '/' ...

  9. 学习动态性能表(4)--v$sqltext&v$sqlarea

    学习动态性能表 第四篇-(1)-V$SQLTEXT  2007.5.29 本视图包括Shared pool中SQL语句的完整文本,一条SQL语句可能分成多个块被保存于多个记录内. 注:V$SQLARE ...

  10. 转：Oracle里几组重要的视图--v$sysstat，v$system_event，v$parameter v$system_parameter

    按组分的几组重要的性能视图 1.System 的 over view v$sysstat , v$system_event  , v$parameter,V$instance得到oracle_sid ...

随机推荐

  1. 乐固加固后windows下实现给apk签名

    遇到了这样一个问题:我们已经在centos下签名生成好的apk,拿到腾讯乐固上加固以后,签名没有了,就需要重新签名,我乐滋滋的想,既然原来是在centos下签名的,那再去centos上签名一次就好了, ...

  2. JavaScriptSerializer的日期转换方案

    1.转换后过滤替换(通用) /// <summary> /// 日期转换 /// </summary> /// <param name="str"&g ...

  3. java微信小程序调用支付接口(转)

    简介:微信小程序支付这里的坑还是有的,所以提醒各位在编写的一定要注意!!! 1.首先呢,你需要准备openid,appid,还有申请微信支付后要设置一个32位的密钥,需要先生成一个sign,得到pre ...

  4. Git安装及创建版本库

    一.在Windows上安装Git 1.虽然用于开发的系统最好是用Mac或者Linux,但绝大多数新人都是用Windows进行开发.Windows系统上也有提供了Git(Windows版),下载地址:h ...

  5. 解决ConfigParser配置option的大小写问题

    通常情况下,我们会这样解析配置文件: confiig = ConfigParser.ConfigParser() config.read('xxx.ini') #这个read表示对某个文件用读打开, ...

  6. Beta冲刺阶段4.0

    1. 提供当天站立式会议照片一张 2. 每个人的工作 (有work item 的ID) 成员 昨天已完成的工作 今天计划完成的工作 工作中遇到的困难 具体贡献 郑晓丽 活动详情界面的美化 首页活动详情 ...

  7. Spark学习之路 （九）SparkCore的调优之数据倾斜调优

    摘抄自:https://tech.meituan.com/spark-tuning-pro.html 数据倾斜调优 调优概述 有的时候,我们可能会遇到大数据计算中一个最棘手的问题——数据倾斜,此时Sp ...

  8. 【Hbase学习之五】HBase MapReduce

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 hadoop-2.6.5 hbase-0.98.12.1-h ...

  9. Go语言专题

    基础语法 Go语言配置开发环境 Go语言语法基础 Go语言面向对象 Go语言并发编程 Go语言搭建开发环境 语言库 Go语言fmt包 Go语言字节处理 Go语言字符串处理 Go语言JSON处理 Go语 ...

  10. 如何删除自己上传的CSDN资源（亲测有效）

    今天发现有一个资源上传错了,想重新上传,删掉以前的资源,才发现CSDN并没有提供删除资源的功能,然后去网上搜了下,这才删除了,不知道怎么删除的小伙伴看过来~ 1.首先,找到自己想要删除资源的页面,举个 ...