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 文件或目录的属性主要包括:文件或目录的节点.种类.权限模式.链接数量.所归属的用户和用户组.最近访问或修改的时间等内容.具体情况如下: # ...
随机推荐
- SQL查询结果增加序列号
SQL查询记录中增加序列号 根据学生成绩在查询结果中增加排名字段: 1.SELECT ROW_NUMBER() OVER (ORDER BY SCORE ASC) AS RANK,NAME,SCORE ...
- 如何配置属于自己的Git账户
如何配置属于自己的Git账户:https://jingyan.baidu.com/article/3d69c55123e556f0cf02d730.html
- linux内核的gpiolib详解
#include <linux/init.h> // __init __exit #include <linux/module.h> // module_init module ...
- 将图片地址转为blob格式的例子
HTML代码: <div id="forAppend" class="demo"></div> Javascript代码: <sc ...
- js的validate插件异步效验
js代码 $(function () { $("#regForm").validate({ onsubmit:true,// 是否在提交是验证 onkeyup: false, // ...
- jquery遍历table中每个td的值
废话不说直接上: <table style="border:1px solid #ccc"> <tr> <td&g ...
- python基础--5字典
#字典#dict#基本结构info={ "k1":'v1' #键值对 ,"k2":"v2"} #字典的value可以是任何值# info={ ...
- 2017ICPC南宁M The Maximum Unreachable Node Set （偏序集最长反链）
题意:给你一张DAG,让你选取最多的点,使得这些点之间互相不可达. 思路:此问题和最小路径可重复点覆盖等价,先在原图上跑一边传递闭包,然后把每个点拆成两个点i, i + n, 原图中的边(a, b)变 ...
- Java使用多线程发送消息
在后台管理用户信息的时候,经常会用到批量发送提醒消息,首先想到的有: (1).循环发送列表,逐条发送.优点是:简单,如果发送列表很少,而且没有什么耗时的操作,是比较好的一种选择,缺点是:针对大批量的发 ...
- GPS通讯 数据包解析
全球时区的划分: 每个时区跨15°经度.以0°经线为界向东向西各划出7.5°经度,作为0时区.即0时区的经度范围是7.5°W——7.5°E.从7.5°E与7.5°W分别向东.向西每15°经度划分为一个 ...