6.Vue.js-条件与循环
条件判断
v-if
条件判断使用 v-if 指令：
<div id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h1>菜鸟教程</h1>
<p>学的不仅是技术，更是梦想！</p>
<p>哈哈哈，打字辛苦啊！！！</p>
</template>
</div> <script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：
<!-- Handlebars 模板 -->
{{#if ok}}
<h1>Yes</h1>
{{/if}}
v-else
可以用 v-else 指令给 v-if 添加一个 "else" 块：
<div id="app">
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
</div>
<script>
new Vue({
el: '#app'
})
</script>
v-else-if
v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div> <script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show
我们也可以使用 v-show 指令来根据条件展示元素：
<h1 v-show="ok">Hello!</h1>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1 v-show="ok">Hello!</h1>
</div> <script>
new Vue({
el: '#app',
data: {
ok: false
}
})
</script>
</body>
</html>
6.Vue.js-条件与循环的更多相关文章
- Vue.js 条件与循环
条件判断: v-if: 条件判断使用 v-if 指令: v-else-if:(其实和Java,c,js的语法差不多) v-show:
- 【laravel5.4+vue.js】laravel 循环三维数组，解决：htmlentities() expects parameter 1 to be string, array given
laravel循环三维数组 +++ vue.js循环三维数组 (数据均是以三维数组形式存在的) <form-item label="权限名称" prop=" ...
- vue.js条件渲染 v-if else-if v-for
v-if: 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: {{#if ok}} <!-- Handlebars 模板 --> <h1>Yes</ ...
- Vue.js 条件渲染 v-if、v-show、v-else
v-if v-if 完全根据表达式的值在DOM中生成或移除一个元素.如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除:否则,对应元素的一个克隆将被重新插入DOM中. 1 2 3 ...
- Java,vue.js,jsp for循环的写法
vue.js <li v-for="student in studentList">{{student.name}}</li> jsp el表达式 < ...
- Vue.js：条件与循环
ylbtech-Vue.js:条件与循环 1.返回顶部 1. Vue.js 条件与循环 条件判断 v-if 条件判断使用 v-if 指令: v-if 指令 在元素 和 template 中使用 v-i ...
- 一款简单而不失强大的前端框架——【Vue.js的详细入门教程①】
↓— Vue.js框架魅力 —↓ 前言 Vue.js 是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.V ...
- （私人收藏）Vue.js手册及教程
(私人收藏)Vue.js手册及教程 https://pan.baidu.com/s/1XG1XdbbdBQm7cyhQKUIrRQ5lrt Vue.js手册及教程 Vue.js 教程 Vue.js 安 ...
- vue.js循环for（列表渲染）详解
vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
- Vue.js 2.0 学习重点记录
Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性. Vue.js.js 支持所有兼容 EC ...
随机推荐
- SeleniumLibrary 主要关键字 基于python3
关键字的解释 https://blog.csdn.net/ak739105231/article/details/88926995 click element 都是元素点击事件:不赘述 click l ...
- 动图图解！怎么让goroutine跑一半就退出？
光看标题,大家可能不太理解我说的是啥. 我们平时创建一个协程,跑一段逻辑,代码大概长这样. package main import ( "fmt" "time" ...
- [atAGC045F]Division into Multiples
令$d=\gcd(a,b)$,可以发现$c|(ax+by)$等价于$lcm(c,d)|(ax+by)$,因此不妨令$c'=lcm(c,d)$,然后将$a$.$b$和$c$同时除以$d$ 接下来设$(a ...
- [atAGC045B]01 Unbalanced
将0变为-1后求前缀和,那么$s$的价值即为最大的前缀和-最小的前缀和(特别的,空前缀的前缀和为0) 令$f(x)$表示当最大的前缀和不大于$x$时,最小的前缀和最大是多少,答案即为$\min_{x} ...
- [atARC094F]Normalization
考虑$s$能变成$t$的必要条件(假设$s\ne t$): 1.$s$中存在一对相邻字符不同 2.$|s|=|t|$且若将a-c对应为0-2,则字符模3同余: 3.$t$中存在一对相邻两个字符相同 同 ...
- Android系统编程入门系列之硬件交互——多媒体摄像头
多媒体系列硬件 多媒体包括图片.动画.音频.视频,这些多媒体素材的采集(输入)主要依靠摄像头和麦克风等硬件设备转化为基础数据,而他们的播放渲染(输出),则需要依靠具有相关功能的编解码软件.当然随着硬件 ...
- Java生产环境JVM设置成固定堆大小深层原理
可能很多人都知道Java程序上生产后,运维人员都会设定好JVM的堆大小,而且还是把最大最小设置成一样的值.那究竟是为什么呢?一般而言,Java程序如果你不显示设定该值得话,会自动进行初始化设定. -X ...
- ASP .Net Core 在 CentOS8 ARM 下连接 SQL Server 2008 R2（Hypervisor）
本文主要记录在 ARM 系统下无法连接SQL Server 2008 R2 的解决过程. 解决方案是使用 ODBC 的方式连接数据库,进行操作. 手上有公司的华为鲲鹏云计算 ARM 架构的 CentO ...
- Hbuilder/Uniapp 格式化的时候，很多属性会排列在一行，如何结局？
因为自己遇到这个问题,然后百度了很久都得不到解决办法,所以解决问题以后在博客园写下此文,希望能帮助到更多人! //在jsbeautifyrc.js里面的html中加入这个,就OK了 "wra ...
- Atcoder Grand Contest 024 E - Sequence Growing Hard（dp+思维）
题目传送门 典型的 Atcoder 风格的计数 dp. 题目可以转化为每次在序列中插入一个 \([1,k]\) 的数,共操作 \(n\) 次,满足后一个序列的字典序严格大于前一个序列,问有多少种操作序 ...