v-if指令
2024-09-03 18:56:21
<!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>
最新文章
- List的Capacity
- OC单例快速实现
- 比较偏门的JVM语言Quercus - PHP on JVM
- SharePoint DateTimeControl 使用
- Android之开源项目工具库篇
- hdoj 3371 Connect the Cities
- RHEL7查看网卡配置命令ip addr show
- stack的应用
- FPA笔记三 数据功能的识别
- 2018年 js 简易控制滚动条滚动的简单方法
- 代码统计 (uustepcount)
- eclipse2019-03设置代码编辑区背景为图片
- codevs1017乘积最大
- 第10月第6天 lua 闭包
- C# 使用系统方法发送异步邮件
- Windows Server 2008 + SQL Server 2005集群
- Python: 字典列表: 通过某个字段将记录分组
- python之web开发利器
- 把Scala代码当作脚本运行
- boa.config