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 文件或目录的属性主要包括:文件或目录的节点.种类.权限模式.链接数量.所归属的用户和用户组.最近访问或修改的时间等内容.具体情况如下: # ...
随机推荐
- [2019杭电多校第一场][hdu6578]Blank(dp)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6578 计数问题想到dp不过分吧... dp[i][j][k][w]为第1-i位置中4个数最后一次出现的 ...
- $.ajax()方法详解（网上引用）
jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...
- B.Petr and a Combination Lock
https://codeforces.com/contest/1097/problem/A Petr and a Combination Lock time limit per test 1 seco ...
- wxpython菜单栏、子菜单栏、弹出菜单栏、状态栏小程序学习源代码分享
#coding=utf-8 import wx class MyFrame(wx.Frame): def __init__(self): wx.Frame.__init__(self,None,-1, ...
- C# 打印机连接状态判断
原文:https://www.cnblogs.com/Old-Fish/p/6258118.html /// <summary> /// 判断是否连接打印机 /// </summar ...
- 从0构建webpack开发环境(一) 一个简单webpack.config.js
本文基于webpack4.X,使用的包管理工具是yarn 概念相关就不搬运了,直接开始 首先项目初始化 mkdir webpack-demo && cd webpack-demo ya ...
- There is no Action mapped for namespace [/] and action name [TestAction] ass
1.修改action的name值 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE strut ...
- VirtualBox中安装CentOS 7后无法上网问题
1.在VirtualBox的设置界面,点击“网络”, 将虚拟机的“连接方式”设置为桥接模式, “界面名称”选择笔记本的无线网卡(一般是“wireless Network”的选项) 将“接入网线”勾选上 ...
- rocketmq-console控制台管理界面配置
Rocketmq可视化管理控制台配置 前提: RocketMQ有一个对其扩展的开源项目incubator-rocketmq-externals,这个项目中有一个子模块叫“rocketmq-consol ...
- devops持续集成，Centos7.6下gitlab+jenkins(pipeline)实现代码自动上线
持续集成 gitlab+jenkins(pipeline)实现代码自动上线 环境准备:Centos7.6版本ip:192.168.0.13 主机名:gitip:192.168.0.23 主机名:jen ...