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 文件或目录的属性主要包括:文件或目录的节点.种类.权限模式.链接数量.所归属的用户和用户组.最近访问或修改的时间等内容.具体情况如下: # ...
随机推荐
- 详解 HiveUDF 函数
更多精彩原创内容请关注:JavaInterview,欢迎 star,支持鼓励以下作者,万分感谢. Hive 函数 相信大家对 Hive 都不陌生,那么大家肯定用过 Hive 里面各种各样的函数.可能大 ...
- Django基础之简介（二）
三板斧 from django.shortcuts import render,HttpResponse, redirect HttpResponse # 返回字符串 urls: urlpatte ...
- sqlserver 高版本迁移到低版本
奇葩事不少, 这不, 得把 sqlserver 2014 迁移到 2012 开始以为用备份再还原的方法就可以, 谁知道最终兼容性的问题无法解决(低版本不兼容高版本备份的文件, 即便在高版本中选择了兼 ...
- map集合中取出分类优先级最高的类别名称
import java.util.Arrays; import java.util.Collection; import java.util.HashMap; import java.util.Map ...
- Python2 安装教程
目录 1. 推荐阅读 2. 安装包下载 3. 安装步骤 1. 推荐阅读 Python基础入门一文通 | Python2 与Python3及VSCode下载和安装.PyCharm破解与安装.Python ...
- JS 控制子页面刷新父页面
iframe里面的子页,用parent.location.href = parent.location.reload();如果是window.open 打开就用opener.location.relo ...
- WebAuthorize（中间件对所有请求进行拦截）core只有通过添加中间件过滤请求方式 而非继承然后写特性的那种方式
一.WebAuthorize 1.项目名称 WebAuthorize 2.加个中间件 过滤请求. using Microsoft.AspNetCore.Builder; using Microsoft ...
- Nginx优化_自定义报错页面
自定义返回给客户端的404错误页面 1. 优化前,客户端使用浏览器访问不存在的页面,会提示404文件未找到 client]# firefox http://192.168.4.5/xxxxx ...
- LinuxC语言实现ATM取款机实验Socket
链接:https://pan.baidu.com/s/1sZt4qhYc6CDJVpoJHbtw-Q 提取码:53ot 复制这段内容后打开百度网盘手机App,操作更方便哦 本实验用的是Centos7t ...
- bzoj5016 & loj2254 [Snoi2017]一个简单的询问 莫队
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=5016 https://loj.ac/problem/2254 题解 原式是这样的 \[ \su ...