demo.html

 <!DOCTYPE html>

 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml"

       xmlns:v-on="http://www.w3.org/1999/xhtml">

 <head>

     <meta charset="UTF-8">

     <title>Vue Demo</title>

     <!--自选版本-->

     <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>-->

     <!-- 开发环境版本，包含了有帮助的命令行警告 -->

     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     <!-- 生产环境版本，优化了尺寸和速度 -->

     <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->

 </head>

 <body>

 <div id="app">

     <div>

         <h2>v-if、v-show举例说明</h2>

         <div>

             <h3>v-if 示例</h3>

             <div>

                 <button v-on:click="error=!error">网络错误</button>

                 <button v-on:click="success=!success">网络正常</button>

                 <p v-if="error">网络错误：404</p>

                 <!--if条件满足，else条件不会显示-->

                 <p v-else-if="success">网络正常：200</p>

                 <!--if和else都不满足时显示-->

                 <p v-else>未知</p>

             </div>

         </div>

         <hr>

         <div>

             <h3>v-show 示例</h3>

             <!--与if不同的是元素始终存在，只是是否展现-->

             <div>

                 <button v-on:click="error=!error">网络错误</button>

                 <button v-on:click="success=!success">网络正常</button>

                 <p v-show="error">网络错误：404</p>

                 <p v-show="success">网络正常：200</p>

             </div>

         </div>

     </div>

 </div>

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

 </body>

 </html>

app.js

var app = new Vue({

    el: '#app',

    data: {

        error: false,

        success: false,

    },

    methods: {},

    computed: {}

})

截图：

Vue之v-for、v-show使用举例的更多相关文章

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

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

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

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

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

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

  4. v$session & v$session_wait

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

  5. 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 (文 ...

  6. 错误提示：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 ...

  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. RMQ问题--范围最小值问题

    范围最小值问题(Range Minium Query,RMQ)---RMQ问题 一.一维问题 给出一个n个元素的数组A1,A2,...,An, 设计一个数据结构, 支持查询操作Query(L,R):计 ...

  2. 剑指offer——链表中倒数第k个结点

    输入一个链表,输出该链表中倒数第k个结点. class Solution { public: ListNode* FindKthToTail(ListNode* pListHead, unsigned ...

  3. Android测试（一）：在Android中测试App

    原文:https://developer.android.com/training/testing/index.html 测试你的App是开发过程中的重要组成部分.通过对应用程序持续的运行测试,你可以 ...

  4. Apache Spark 内存管理详解（转载）

    Spark 作为一个基于内存的分布式计算引擎,其内存管理模块在整个系统中扮演着非常重要的角色.理解 Spark 内存管理的基本原理,有助于更好地开发 Spark 应用程序和进行性能调优.本文旨在梳理出 ...

  5. JAVA生成一个二维数组，使中间元素不与相邻的9个元素相等，并限制每一个元素的个数

    JAVA生成一个二维数组,使中间元素不与相邻的9个元素相等,并限制每一个元素的个数 示例如下 至少需要九个元素:"A","B","C",&q ...

  6. Linux ip netns 命令

    ip netns 命令用来管理 network namespace.它可以创建命名的 network namespace,然后通过名字来引用 network namespace,所以使用起来很方便. ...

  7. DOM操作 JS事件 节点增删改查

    --------------------------习惯是社会的巨大的飞轮和最可贵的维护者.——威·詹姆斯 day 49 [value属性操作] <!DOCTYPE html><ht ...

  8. 如何在C#中使用Dapper（译）

    前言: 对象关系映射(ORM)已经被使用了很长时间,以解决在编程过程中对象模型与数据模型在关系数据库中不匹配的问题. Dapper是由Stack OverFlow团队开发的开源的,轻量级的ORM.相比 ...

  9. Truncated Power Method for Sparse Eigenvalue Problems

    目录 算法 k的选择 \(x\)的初始化 代码 抱歉,真的没怎么看懂,当然,估计和我现在没法静下心来好好看也有关系. 算法 想法非常非常简单吧,就是在原来幂法的基础上,每次迭代的时候再加个截断.当然, ...

  10. dfs实现数的全排列

    代码 #include<bits/stdc++.h> using namespace std; #define ll long long bool vis[15]; int a[15]; ...