（5）打鸡儿教你Vue.js
条件与循环
条件判断使用 v-if 指令
<p v-if="seen">
<template v-if="ok">
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
<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>
<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-show 指令来根据条件展示元素：
<body>
<div id="app">
<h1 v-show="ok">Hello!</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
</body>
请点赞！因为你的鼓励是我写作的最大动力！
吹逼交流群：711613774
（5）打鸡儿教你Vue.js的更多相关文章
- （29）打鸡儿教你Vue.js
web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器 实现阅读器的基础功能 字号选择,背景颜色 有上一页,下一页的功能 设置字号,切换主题,进度按钮 电子书目录 ...
- （26）打鸡儿教你Vue.js
weex框架的使用 1.weex开发入门 2.weex开发环境搭建 3.掌握部分weex组件模块 4.了解一些vue基本常见语法 5.制作一个接近原生应用体验的app weex介绍 安装开发环境 We ...
- （22）打鸡儿教你Vue.js
vue.js 单页面,多页面 Vue cli工具 复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代码实现,线上测试 git clone,git int 创建分支,推送分支,合并分支 ...
- （21）打鸡儿教你Vue.js
组件化思想: 组件化实现功能模块的复用 高执行效率 开发单页面复杂应用 组件状态管理(vuex) 多组件的混合使用 vue-router 代码规范 vue-router <template> ...
- （19）打鸡儿教你Vue.js
了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...
- （18）打鸡儿教你Vue.js
介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...
- （17）打鸡儿教你Vue.js
vue-router <a class="list-group-item" v-link="{ path: '/home'}">Home</a ...
- （15）打鸡儿教你Vue.js
组件化vue.js 组件单向绑定 组件双向绑定 组件单次绑定 创建组件构造器 注册组件 使用组件 Vue.extend() Vue.component() 使用组件 <div id=" ...
- （13）打鸡儿教你Vue.js
一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...
- （12）打鸡儿教你Vue.js
组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...
随机推荐
- C# 阿拉伯数字转换为中文数字/中文数字转换为阿拉伯数字
项目中经常会格式化数据,转换数字的使用情况比较多,记录一下数字转换的方法! 如果需要转换为繁体中文,将数组里的汉字换成繁体中文即可. 1.阿拉伯数字转换为中文数字 /// <summary> ...
- 怎样修改element-ui中的样式？
方法一 方法二 使用 /deep/ .homePage /deep/ .el-main { padding: 0; } .homePage为我们要修改组件类名的父级组件样式类名..即使定义一个空的 ...
- 【转载】腾讯云安全组如何开放3306端口让Mysql可访问
Mysql数据库的默认端口号为3306,在服务器安装好Mysql数据库后,如果使用的服务器是阿里云或者腾讯云服务器,如果在后台启用了安全组功能,则需要在安全组中对3306端口的入站规则进行放行,只有在 ...
- java利用反射打印出类的结构
1 输入一个类名:java.lang.String将打印出String类定义的结构,例如: public final class java.lang.String { public java.lang ...
- Modelsim问题集锦
前言 收集工程调试中遇到的modelsim问题. 问题 (1)仿真发现时钟信号和理论上的数据信号没有边沿对齐. 解决:一般是时钟精度不匹配的问题. 如果想要1ns的精度则代码中的精度需设置为: v语法 ...
- Eclipse-错误集
1.The origin server did not find a current representation for the target resource or is not willing ...
- PHP原生EXCEL导出带样式无插件无乱码实现
PHP原生EXCEL导出 经测试 带样式 无插件 无乱码,不需要引入任何插件,不需要修改任何编码 (使用时只需要修改引入php数据库配置文件.修改thead tbody中的数据即可.根据自己的需要去接 ...
- An incompatible version [1.2.10] of the APR based Apache Tomcat Native library is installed, while Tomcat requires version [1.2.14]
这个链接的博主写的很详细,直接推荐:https://blog.csdn.net/zhoukikoo/article/details/80532483
- nodejs库express是如何接收inbound json请求的
这样几行简单的代码创建一个web服务器: var express = require('express'); var app = express(); var server = require('ht ...
- Nginx的反向代理和负载均衡服务
Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行. ...