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. MySQL高效的前提

    好硬件是数据库高效的前提,没有好硬件其他优化都是白费 高性能的CPU 主频高SQL处理的更快 3级cache大CPU计算速率更快 多线程,同时并发处理SQL 关闭NUMA并设置为最大性能模式,充分利用 ...

  2. 海量数据找相同数,高配词,不重复的数,判断一个数是否存在,查询串,不同电话号码的个数,中位数,按照query频度排序,topk

    这类题目,首先需要确定可用内存的大小,然后确定数据的大小,由这两个参数就可以确定hash函数应该怎么设置才能保证每个文件的大小都不超过内存的大小,从而可以保证每个小的文件都能被一次性加载到内存中. 1 ...

  3. iOS UI进阶-1.1 Quartz2D 图片水印/裁剪/截图

    图片水印 UIImage+MJ.h #import <UIKit/UIKit.h> @interface UIImage (MJ) /** * 打水印 * * @param bg 背景图片 ...

  4. vue中兄弟组件间 的传值 bus(可以理解为公共交通)

    点击大儿子(头部组件的年月日,下面的都要变化) 就相当于点击了年月日之后,下面的组件重新调接口,参数变化       1.首先随便哪儿写个bus.js 内容如下: import Vue from 'v ...

  5. 工具方法 获取远程IP

    java-code: public String getRemoteIP(HttpServletRequest request) { String clientIp = request.getHead ...

  6. dubbo.provider和dubbo.consumer配置

    Configure service provider <?xml version="1.0" encoding="UTF-8"?> <bean ...

  7. 字符串ASCII码排序

    在对接第三方支付渠道的时候,第三方会要求参数按照ASCII码从小到大排序. 如下是渠道方有关生成签名规则的java代码示例: //初始化0010merkey.private文件: String mer ...

  8. mysql group_concat用法

    MySQL中group_concat函数 完整的语法如下: group_concat([DISTINCT] 要连接的字段 [Order BY ASC/DESC 排序字段] [Separator '分隔 ...

  9. js中var a=new Object()和var a={}有什么区别吗？

    应该是没有区别的,两者都是生成一个默认的Object对象.js和其它语言一样,一切对象的基类都是Object,所以,new Object()和简易的{}是同样的空对象,就是默认的对象.本来我以为{}应 ...

  10. python socket编程笔记

    用python实现一个简单的socket网络聊天通讯 (Linux --py2.7平台与windows--py3.6平台) 人生苦短之我用Python篇(socket编程) python之路 sock ...