v-show v-if 的使用
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 的使用的更多相关文章
- 临时文件相关的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 ...
- 动态性能视图v$mystat,v$sesstat,v$statname
视图说明: v$mystat-------> 当前会话统计 v$sesstat------> 按会话进行分组统计 v$sysstat-------> 当系统的整体统计 v$statn ...
- 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 ...
随机推荐
- js, css混淆
原理:调用yuicompressor-2.4.8.jar, 生成混淆后的文件,强大的它能处理css,js. 1,准备一个txt,列出所需要合并的js,如js.txt jquery-1.9.1.min. ...
- windows下使用pyinstaller把python文件打包成exe可执行文件
使用pyinstaller打包有个好处就是所有依赖都打包进去了,可以随意把文件移动到别的电脑上使用 安装 pip install pyinstaller 新建一个demo.py文件 #!/usr/bi ...
- jenkins配置详解之——执行者数量
jenkins上的执行者数量的设置并不是随意设置的,位置如下: 他是跟cpu核数密切相关的,原则上是不能超过cpu的核数的, 如何查看cpu的核数呢,命令如下: # 查看物理CPU个数cat /pro ...
- 解决PuTTY中文乱码
转载:http://lhdeyx.blog.163.com/blog/static/3181969720091115113716947/ 打开putty,选择 Category中的Windows--- ...
- js--script和link中的 integrity 属性
<link crossorigin="anonymous" integrity="sha256-+hDz/gVbhp24mhOmoIT4Du4F3K5fs9fjjo ...
- Python基础(三)Mysql数据库安装及使用
在python下使用mysql需要: 1.安装mysql 2.安装python pymysql包(pymysql包支持py3 跟mysqldb用法差不多) 一.安装mysql mysql下载地址:h ...
- Spring @Value注解 and Spring Boot @ConfigurationProperties注解
一.Spring的@Value Spring EL表达式语言,支持在XML和注解中表达式,类是于JSP的EL表达式语言. 在Spring开发中经常涉及调用各种资源的情况,包含普通文件.网址.配置文件. ...
- 用URLRewriter重写url
用url重新一般都是使用URLRewriter库,基本上都是一些配置,在webconfig中 首先配置configuration节点 <configSections> <sectio ...
- Oracle SPA取报告阶段xml解析失败解决方案
SPA的整体测试过程可以参考: 记录一则完整的SPA(10g->11g)测试过程 故障描述:数据库字符集:US7ASCII,在SPA分析阶段正常,但在取报告阶段xml解析失败,具体现象如下: S ...
- sv命令空间 packge
SV中的module,interface,program,checker,都提供declaration空间,内部定义都local当前的那个scope,相互之间的building block不影响,不识 ...