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. Laravel中路由怎么写（一）

    1.路由基本使用示例 1.1 默认示例 Laravel中所有路由定义在/app/Http/routes.php文件中,该文件默认定义了应用的首页路由: Route::get('/', function ...

  2. node微信公众号开发---自动回复

    微信开发的特点:1.post请求 (一定要注意,这里和配置域名的时候不一样,配置域名是get请求)2.数据包是xml格式的3.你给微信返回的数据也是xml格式的 var parseString = r ...

  3. Tensorflow检验GPU是否安装成功 及 使用GPU训练注意事项

    1. 已经安装cuda但是tensorflow仍然使用cpu加速的问题 电脑上同时安装了GPU和CPU版本的TensorFlow,本来想用下面代码测试一下GPU程序,但无奈老是没有调用GPU. imp ...

  4. MSSqlServer 主从同步复制原理（发布/订阅）

    基本模型 1.发布类型: 快照发布:用于为事务复制和合并复制提供初始数据集:在适合数据完全刷新时也可以使用快照复制.利用这三种复制,SQL Server 提供功能强大且灵活的系统,以便使企业范围内的数 ...

  5. C#通过RFC连接sap系统

    先理解一下 RFC(Romote Function Call)远程函数调用 调用前提: 1.要想通过C# 通过RFC调用SAP端,SAP端要存在RFC远程调用的函数才行(例如SAP端通过SE37创建) ...

  6. OEMCC 13.2 安装部署

    需求:安装部署OEM 13.2 环境:两台主机,系统RHEL 6.5,分别部署OMS和OMR: OMS,也就是OEMCC的服务端 IP:192.168.1.88 内存:12G+ 硬盘:100G+ OM ...

  7. 使用mysqlbinlog从二进制日志文件中查询mysql执行过的sql语句 （原）

    前提MySQL开启了binlog日志操作1. 查看MySQL是否开启binlog(进mysql操作) mysql> show variables like 'log_bin%';       2 ...

  8. 域名重新绑定ip时访问地址NotFount404

    情形描述:部署在A服务器IIS上的asp.net程序,搬迁到B服务器上,重新绑定域名和ip后.再访问网址时有些电脑能正常访问,而有些电脑报404 not found错误. 经分析发现是个人电脑网络设置 ...

  9. steam Depot 生成与应用脚本

    Depot 生成脚本 首先为您上传的每个 Depot 创建一个 Depot 生成脚本.从复制 depot_build_1001.vdf 脚本开始,并按将上传的 Depot ID 命名. Depot 生 ...

  10. hdu2262 高斯消元

    题目:有一个地图,一个人从某个点出发,问走到花园的期望步数为多少 设某点的期望步数为Ei. 那么目标的Ei=0. Ei=(Enext1+Enext2……Enextk)/k+1. 为什么是这个公式 因为 ...