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. .Net使用RabbitMQ详解 转载http://www.cnblogs.com/knowledgesea/p/5296008.html

    .Net使用RabbitMQ详解   序言 这里原来有一句话,触犯啦天条,被阉割!!!! 首先不去讨论我的日志组件怎么样.因为有些日志需要走网络,有的又不需要走网路,也是有性能与业务场景的多般变化在其 ...

  2. django 接受 ajax 传来的数组对象

    django 接受 ajax 传来的数组对象 发送:ajax 通过 POST 方式传来一个数组 接收:django 接受方式 array = request.POST.getlist(‘key[]’) ...

  3. 【原创】研发应该懂的binlog知识(下)

    引言 这篇是<研发应该懂的binlog知识(上)>的下半部分.在本文,我会阐述一下binlog的结构,以及如何使用java来解析binlog. 不过,话说回来,其实严格意义上来说,研发应该 ...

  4. spark 2.3 导致driver OOM的一个SparkPlanGraphWrapper源码的bug

    背景 长话短说,我们部门一个同事找到我,说他的spark 2.3 structured streaming程序频繁报OOM,从来没有坚持过超过三四天的,叫帮看一下. 这种事情一般我是不愿意看的,因为大 ...

  5. 循环 while

    day 2 ---------------------------------------------------把一件简单的事情做到极致,你就成功了. Day2作业及默写 1.判断下列逻辑语句的Tr ...

  6. 几何学观止（Lie群部分）

    上承这个页面,这次把Lie群的部分写完了 几何学观止-微分几何部分(20181102).pdf 我觉得其他部分(尤其是代数几何部分)我目前没有把握写得令自己满意,总之希望在毕业前能写完吧. 这次调整了 ...

  7. c++继承实例

    #include <iostream> #include <vector> #include <string> using namespace std; class ...

  8. Python-序列化模块-json-62

    序列化模块 Eva_J 什么叫序列化——将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化. 比如,我们在python代码中计算的一个数据需要给另外一段程序使用,那我们怎么给? 现在我们能想到 ...

  9. H5 文字属性

    03-文字属性 我是文字 我是文字 abc我是段落 <!DOCTYPE html> <html lang="en"> <head> <me ...

  10. （第十三周）Final Review会议

    项目名:食物链教学工具 组名:奋斗吧兄弟 组长:黄兴 组员:李俞寰.杜桥.栾骄阳.王东涵 Final Review会议 时间:2016.12.2   13:00——15:00 地点:冬华楼一楼大厅 会 ...