Vue之v-for、v-show使用举例
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使用举例的更多相关文章
- 动态性能视图v$mystat,v$sesstat,v$statname
视图说明: v$mystat-------> 当前会话统计 v$sesstat------> 按会话进行分组统计 v$sysstat-------> 当系统的整体统计 v$statn ...
- 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage
SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...
- 转：V$SQL,V$SQLAREA,V$SQLTEXT
V$SQL*表用于查看Shared SQL Area中SQL情况 V$SQLTEXT V$SQLTEXT用途很简单,就是用来查看完整的SQL语句,V$SQL和V$SQLAREA只能显示1000 byt ...
- v$session & v$session_wait
(1)v$session v$session视图记录了当前连接到数据库的session信息 Column Description SADDR session address SID Session i ...
- 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 (文 ...
- 错误提示：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 ...
- Oracle v$session/v$sql 表
在本视图中,每一个连接到数据库实例中的 session都拥有一条记录.包括用户 session及后台进程如 DBWR, LGWR, arcchiver等等. V$SESSION中的常用列 V$SESS ...
- oracle常用视图v$mystat v$sesstat v$sysstat v$statname v$thread v$ parameter v$session v$process
这两天看了盖国强老师的<<深入浅出>>,很佩服盖老师钻研的精神.书中常用到一个查询语句,为了获取当前会话的跟踪文件路径,sql如下: SELECT d.VALUE || '/' ...
- 学习动态性能表(4)--v$sqltext&v$sqlarea
学习动态性能表 第四篇-(1)-V$SQLTEXT 2007.5.29 本视图包括Shared pool中SQL语句的完整文本,一条SQL语句可能分成多个块被保存于多个记录内. 注:V$SQLARE ...
- 转：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 ...
随机推荐
- esp8266 免费wifi强推广告神器(0) 项目介绍
某宝产品 WIFI SSID广告终端路由推广宝 简单来说,手机连接免费wifi,自动弹出广告页面,有二维码和电话,点击电话直接打电话给商家客服,用户点击链接跳转到商家网页. 同时存在设置页面,使用者可 ...
- Spring Security（九）：2.4.4 Checking out the Source（检查来源）
Since Spring Security is an Open Source project, we’d strongly encourage you to check out the source ...
- Spring AOP无法拦截Controller中的方法
想使用AOP Annotation配置Spring MVC的Controller进行拦截, 发现无法拦截Controller的方法, 却可以拦截Service层的方法. 一开始: Spring的配置文 ...
- FineUIPro v4.0.0 发布了，全新 CSS3 动画惊艳登场！
FineUI(专业版)v4.0.0 即将于 2017-10-23 发布! 这个版本将引入了激动人心的 CSS3 动画,只需要开启全局属性 EnableAnimation 即可,先睹为快: 1. 菜单动 ...
- SpringBoot集成Shiro安全框架
跟着我的步骤:先运行起来再说 Spring集成Shiro的GitHub:https://github.com/yueshutong/shiro-imooc 一:导包 <!-- Shiro安全框架 ...
- 这20个Docker Command，有几个是你会的？
在这之前呢,也写过两篇关于Docker基础入门类的文章 Docker容器技术入门(一) Docker容器技术入门(二) 很多人都感觉这文章这么简单.这么基础,可是别忘记了"万丈高楼平地起&q ...
- Linux ACL 权限
ACL 是什么 ACL的全称是 Access Control List (访问控制列表) ,一个针对文件/目录的访问控制列表.它在UGO权限管理的基础上为文件系统提供一个额外的.更灵活的权限管理机制. ...
- 将 ASP.NET Core 2.0 项目升级至 ASP.NET Core 2.1.3X
在上一篇文章ASP.Net Core 运行错误 Http Error 502.5 解决办法的最后有提到说,最推荐的升级办法是从2.0升级到2.1X版本. 操作如下 项目的例子直接使用https://g ...
- 移动H5页面微信支付踩坑之旅（微信支付、单页面路由模拟、按钮加锁、轮询等常见功能）
开发背景: .net混合开发的vue模板语法的单页面应用,所以不存在脚手架以及没有路由可以跳转. 项目描述: 需要写两个页面,在订单详情页需要点击“请输入手机号”进入手机号绑定页面,手机号绑定成功后自 ...
- Centos7修改系统时区
timedatectl status Local time: 四 2014-12-25 10:52:10 CST Universal time: 四 2014-12-25 02:52:10 UTC R ...