Vue.js 条件与循环
来源:阿里云大学——开发者课堂——Vue.js自学手册
条件判断
v-if
条件判断使用 v-if 指令:
v-if 指令
在元素 和 template 中使用 v-if 指令:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 阿里云大学(/edu.aliyun.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <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> </body> </html>
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:
<!-- Handlebars 模板 --> {{#if ok}}<h1>Yes</h1> {{/if}}
v-else
可以用 v-else 指令给 v-if 添加一个 "else" 块:
v-else 指令
随机生成一个数字,判断是否大于0.5,然后输出对应信息:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 阿里云大学(edu.aliyun.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <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> </body> </html>
运行结果
Sorry
v-else-if
v-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用:
v-else 指令
随机生成一个数字,判断是否大于0.5,然后输出对应信息:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 阿里云大学(edu.aliyun.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <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> </body> </html>
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show
我们也可以使用 v-show 指令来根据条件展示元素:
v-show 指令
<h1 v-show="ok">Hello!</h1>
注意: v-show 不支持 <template> 语法。
来自:阿里云大学——开发者课堂——Vue.js自学手册
转载于:https://blog.51cto.com/13730592/2402727
Vue.js 条件与循环相关推荐
- vue.js根据数据循环生成表格_vue.js循环for(列表渲染)详解
vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for {{ item.message }} var example1 = new Vue({ el: '#example-1', ...
- js 字符串插入_Vue.js 条件与循环
来源:阿里云大学--开发者课堂--Vue.js自学手册 条件判断使用 v-if 指令: v-if 指令 在元素 和 template 中使用 v-if 指令: Vue 测试实例 - 阿里云大学(/ed ...
- Vue.js 条件渲染 v-if、v-show、v-else
v-if v-if 完全根据表达式的值在DOM中生成或移除一个元素.如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除:否则,对应元素的一个克隆将被重新插入DOM中. <!DO ...
- 前端之JS条件、循环语句
前端之JS代码块 条件语句 -- 做选择 if--else-- 语法: 条件运算符 switch 三元运算符 网页主题选择 循环语句 for 和 break while 和 continue 函数部分 ...
- Vue.js 条件渲染
v-if 在字符串模板中,比如 Handlebars,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}}<h1>Yes</h1 ...
- vue.js根据数据循环生成表格_vue 遍历数据生成table?
后台数据如下: //银行列表 bankDto: [ 0: {bankName: "中国工商银行", bankCode: "20000001", sName: & ...
- vue.js根据数据循环生成表格_vue嵌套列循环生成考勤表数据
如图 接口返回数据格式: { "total": 1, "rows": [ { "name": "钟伟清", " ...
- Vue.js的基本使用 学习笔记
VUE的基本使用 学习笔记 一. 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是 ...
- 全面掌握前端框架Vue.js
整理自菜鸟教程 Vue.js简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽 ...
最新文章
- 10中文显示都是问号_CAD字体出现问号乱码的解决方法
- 在ASP.NET AJAX中使用应用程序服务和本地化(3):用户个性化组件ProfileService
- 【Tiny4412】Uboot常用命令
- activemq的使用经验
- React开发中使用fetch进行异步请求
- SQL Cookbook—数字、日期
- sql server键查找_如何查找SQL Server版本
- 打开gedit_使用 gedit 文本编辑器优化你的 GNOME 体验 | Linux 中国
- robocode 创建机器人
- Photoshop插件-黑白(二)-脚本开发-PS插件
- 号外号外!兹有第一届区块链技术及应用峰会(BTA)·中国首轮议题抢鲜看
- kafka不消费:9092 (id: 0 rack: null)
- android 耳机数据传输,智能手机耳机电路工作原理
- zabbix配置拓扑图标签及链路流量
- java基础知识入门大全(十年经验总结)
- CSS之毗邻选择器与普通兄弟选择器的区别
- “独得恩宠”OR “雨露均沾”,这个夏天你说了算
- 内外网隔离-Traffic Policy
- win7打印机共享出现错误0x000006d9如何解决
- 面试时,我说谎了——Leo网上答疑44
热门文章
- 全面进军javascript!
- ASP+Access数据库的终极安全大法18则(原创)
- 守住你自己的“沉香”
- linux的centos7安装mysql5.7服务教程
- Linux下SVN创建新的项目
- JSP和Servlet相同点和不同点?
- php做商品预告,预告:关于php制作桌面软件的方案与未来规划
- 将servlet[login]标记为不可用_30分钟上手OUTLOOK - 邮件标记
- 分类二级联动 php,学习猿地-php实现二级联动菜单
- R语言实现混频数据分析