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. MyBatis SpringMVC映射配置注意

    applicationContext.xml中要配置 <!-- MyBatis 的 sqlSessionFactory --> <bean id="sqlSessionFa ...

  2. iOS 第三方框架-MJExtension

    1.数组转换成模型数组 // 将 "微博字典"数组 转为 "微博模型"数组 NSArray *newStatuses = [HWStatus objectArr ...

  3. Selenium基础知识(七)弹出框处理

    使用switch_to.alert方法来处理弹页面弹出的警告框 页面常见警告框种类:alert/confirm 确认框/prompt switch_to.alert().accept() switch ...

  4. shell编程：for循环

    有几个参数执行几次 do done取代了{} 这种用于 文件的个数,用户的个数等. (())里才可以进行加减乘除.

  5. CG标准函数库

    (1)数学函数 函数 功能描述 abs(x) 返回输入参数的绝对值 acos(x) 反余切函数,输入参数范围为[-1,1], 返回[0,π]区间的角度值 all(x) 如果输入参数均不为0,则返回tu ...

  6. python 翻译爬虫

    import urllib.request import urllib.parse import json while 1: content=input("请输入要翻译的内容:") ...

  7. ubuntu安装启动redis

    1.下载安装 sudo apt-get  install  build-essential wget http://redis.googlecode.com/files/redis-2.2.13.ta ...

  8. Oracle10g 连接 sqlserver hsodbc dblink 方式 非透明网关

    Oracle10g 连接 sqlserver hsodbc dblink 方式 非透明网关 那个上传图片太麻烦了,发布到百度文库了 http://wenku.baidu.com/view/b38ae8 ...

  9. C# 队列（Queue）和 堆栈（Stack）

    C# 队列(Queue)和 堆栈(Stack) C# 队列(Queue) 队列(Queue)代表了一个先进先出的对象集合.当您需要对各项进行先进先出的访问时,则使用队列.当您在列表中添加一项,称为入队 ...

  10. jsp登陆界面代码

    <%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncod ...