v-if指令
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>v-if选择指令</title>
<script src="js/vue.js"></script>
</head>
<body>
<h4>根据表达式执行的结果的真假,来选择是否要挂载到DOM上</h4>
<div id="container">
<p>{{msg}}</p>
<h5>!isMember</h5>
<!-- if执行结果是真显示 -->
<p v-if="!isMember">仅会员可见</p>
<h5>isMember</h5>
<p v-if="isMember">仅会员可见</p>
<ul>
<li v-if="answer=='a'">A</li>
<li v-else-if="answer=='b'">B</li>
<li v-else-if="answer=='c'">C</li>
<li v-else>D</li>
</ul>
</div>
<script>
new Vue({
el:"#container",
data:{
msg:"Hello VueJs",
isMember:false,
answer:"a"
},
// 方法
created:function(){
console.log("vue的实例创建完成");
}
})
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>练习</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<h1 v-if="isDataReady">数据正在加载……</h1>
<ul v-if="!isDataReady">
<li v-for="tmp in myList">{{tmp}}</li>
</ul>
</div>
<script>
new Vue({
el:"#container",
data:{
isDataReady:true,
myList:[]
},
created:function(){
//Vue实例创建完成后自动调用该方法
setTimeout(function(){
//修改isDataReady的值
this.isDataReady = false;
}.bind(this),1000);
//初始化myList
this.myList=[100,200,300,400,500];
}
})
</script>
</body>
</html>
v-if指令的更多相关文章
- v:bind指令对于传boolean值的注意之处
1,
- linux查看文件相关指令
以下内容整理自以下两篇文章: http://www.cnblogs.com/xilifeng/archive/2012/10/13/2722596.html Linux 查看文件内容的命令 http: ...
- linux文件管理指令
总述 所有指令都可以使用--help来查看说明 例如:cat --help -x 表示参数 1.cat:用于打印文件(cat -x filename) 参数: -n:由1开始对每行进行编号 -b:由1 ...
- git 指令笔记
狂躁,太狂躁!!赶上过年,赶上自己的懒癌,12月底就学完的教程直到今天才整理笔记,中途沉默在游戏中..... 只给出Windows下git指令操作,推荐大家去廖雪峰前辈那里学习(百度搜索:廖雪峰的官方 ...
- Linux里面的压缩和解压类指令
gzip/gunzip 指令 ( .gz 不能压缩目录) gzip 用于压缩文件, gunzip 用于解压的 . gzip gzip命令用来压缩文件.gzip是个使用广泛的压缩程序,文件经它压缩过后 ...
- Linux服务器安全配置
众所周知,网络安全是一个非常重要的课题,而服务器是网络安全中最关键的环节.Linux被认为是一个比较安全的Internet服务器,作为一种开放源代码操作系统,一旦Linux系统中发现有安全漏洞,Int ...
- orpsocv2 从ROM(bootrom)启动分析--以atlys板子的启动为例子
1 复位后的启动地址 1) 复位后,启动地址在or1200_defines.v最后宏定义,atlys板子的目录:orpsocv2\boards\xilinx\atlys\rtl\verilog\inc ...
- Linux下的压缩和解压缩命令——zip/unzip
zip命令 zip是个使用广泛的压缩程序,文件经它压缩后会另外产生具有".zip"扩展名 的压缩文件. 选项: -A 调整可执行的自动解压缩文件. -b<工作目录> ...
- linux commands
abrt-cli --since ;查看abrt捕捉的异常 alias ;别名,alias rm='rm -i':使用“ \rm ” 使用原命令 alsamixer ;图形音量调节,q 增加左声道, ...
- Linux权限管理.md
Linux 文件的权限 Linux文件权限简介 Linux 文件或目录的属性主要包括:文件或目录的节点.种类.权限模式.链接数量.所归属的用户和用户组.最近访问或修改的时间等内容.具体情况如下: # ...
随机推荐
- 硬核！如何模拟 5w+ 的并发用户？
来自:http://t.cn/ES7KBkW 本文将从负载测试的角度,描述了做一次流畅的5万用户并发测试需要做的事情. 你可以在本文的结尾部分看到讨论的记录. 快速的步骤概要 编写你的脚本 使用JMe ...
- python 重点理论知识点
Python多线程 GIL blablabla concurrent blablabla 简单地说就是作为可能是仅有的支持多线程的解释型语言(perl的多线程是残疾,PHP没有多线程),Python的 ...
- poj1305 Fermat vs. Pythagoras（勾股数）
题目传送门 题意: 设不定方程:x^2+y^2=z^2若正整数三元组(x,y,z)满足上述方程,则称为毕达哥拉斯三元组.若gcd(x,y,z)=1,则称为本原的毕达哥拉斯三元组. 定理:正整数x,y, ...
- MS COCO 数据集学习笔记（Common Objects in COntext）
一.数据来源 COCO中图片资源均引用自Flickr图片网站 二.数据集创建目的 进行图像识别训练,主要针对以下三个方向: (1)object instances (2)object keypoint ...
- SpringBoot 集成MyBatis 中的@MapperScan注解
SpringBoot 集成MyBatis 中的@MapperScan注解 2018年08月17日 11:41:02 文火慢炖 阅读数:398更多 个人分类: 环境搭建 在SpringBoot中集成My ...
- 前后台交互实例二：前台通过django在数据库里面增删改查数据
url(r'^userinfo/', views.userinfo), url(r'^userdetail-(?P<nid>\d+)/', views.userdetail), url(r ...
- 用Nginx代理请求，处理前后端跨域
自从前端spa框架出现后,都是前后端分离开发了.我们在开发的时候难免会遇到跨域的问题.跨域这种问题解决的方法基本都是在服务端实现的.以java为例,我知道的有3种方法处理跨域: 1.使用 @Cross ...
- 第二讲shiro异常及执行流程
在认证过程中,有一个父异常为:AuthenticationException 该异常有几个子类,分别对应不同的异常情况: (1)DisabledAccountException:账户失效异常 (2)E ...
- RabbitMQ 全套
本博客代码运行环境 ErLang: ErLang_X64_22 version RabbitMQ: RabbitMQ_Server_3.7.15 version python : Python 3.7 ...
- ForkJoinPool源码简单解析
ForkJoin框架之ForkJoinTask java 阅读约 62 分钟 前言 在前面的文章"CompletableFuture和响应式编程"中提到了ForkJoinTas ...