条件与循环

条件判断使用 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的更多相关文章

  1. (29)打鸡儿教你Vue.js

    web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器 实现阅读器的基础功能 字号选择,背景颜色 有上一页,下一页的功能 设置字号,切换主题,进度按钮 电子书目录 ...

  2. (26)打鸡儿教你Vue.js

    weex框架的使用 1.weex开发入门 2.weex开发环境搭建 3.掌握部分weex组件模块 4.了解一些vue基本常见语法 5.制作一个接近原生应用体验的app weex介绍 安装开发环境 We ...

  3. (22)打鸡儿教你Vue.js

    vue.js 单页面,多页面 Vue cli工具 复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代码实现,线上测试 git clone,git int 创建分支,推送分支,合并分支 ...

  4. (21)打鸡儿教你Vue.js

    组件化思想: 组件化实现功能模块的复用 高执行效率 开发单页面复杂应用 组件状态管理(vuex) 多组件的混合使用 vue-router 代码规范 vue-router <template> ...

  5. (19)打鸡儿教你Vue.js

    了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...

  6. (18)打鸡儿教你Vue.js

    介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...

  7. (17)打鸡儿教你Vue.js

    vue-router <a class="list-group-item" v-link="{ path: '/home'}">Home</a ...

  8. (15)打鸡儿教你Vue.js

    组件化vue.js 组件单向绑定 组件双向绑定 组件单次绑定 创建组件构造器 注册组件 使用组件 Vue.extend() Vue.component() 使用组件 <div id=" ...

  9. (13)打鸡儿教你Vue.js

    一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...

  10. (12)打鸡儿教你Vue.js

    组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...

随机推荐

  1. 序列方差[NTT]

    也许更好的阅读体验 \(\mathcal{Description}\) 给你一个长度为\(n\)的数组\(a\) 你会得到 \(q\) 条指令, 分两种: \(1\ l\ r\ w\) 表示把 \(l ...

  2. 用ASP.NET Web API技术开发HTTP接口(二)

    在第一部分,我们创建了一个基本的ASP.NET Web API项目,新建成功了数据表,然后添加了一些测试数据,最后创建了API控制器,用json格式把数据表里面的内容成功输出到浏览器上.接下来我们将继 ...

  3. 利用RabbitMQ实现分布式事务

    实现要点:1.构建本地消息表及定时任务,确保消息可靠发送:2.RabbitMQ可靠消费:3.redis保证幂等 两个服务:订单服务和消息服务 订单服务消息可靠发送 使用springboot构建项目,相 ...

  4. nginx热加载、热升级、回滚

    修改完配置文件后使用 nginx -s reload 命令进行热加载 编译好新的 nginx 二进制文件后,运行nginx 开启nginx服务,然后使用 kill -USR2 新的nginx_mast ...

  5. js入门之DOM

    一.理解Web API Web API Application Programming Interface 应用程序编程接口, 是一个预先定义好的函数和方法 目的是提供应用程序与开发人员基于某软件或硬 ...

  6. Vue的学习笔记

    以下文章皆为观看慕课网https://www.imooc.com/learn/796中“河畔一角”老师的讲解做的笔记,仅供参考. 一.Vue特点 Vue是MVVM的框架,也就是模型视图->视图模 ...

  7. FICO-Payment Terms 收付款条件和分期付款设置

    转载:https://www.cnblogs.com/weichuo/p/3524278.html Payment Terms 收付款条件和分期付款设置 SAP Payment Terms 中文翻译为 ...

  8. tcping端口检测工具使用

    大家都知道检测网络状态是,无论是服务器/客户机 最常用的就是ping命令,但ping命令只能检测ICMP协议,若对方禁止ping协议了,自然ping命令也就无法检测了,此时,我们可以通过tcping工 ...

  9. JAVA笔记整理(六),JAVA中的多态

    JAVA引用变量有两个类型:一个是编译时类型,一个运行时类型 编译时类型由声明该变量时使用的类型决定,运行时类型由实际赋给该变量的对象决定.如果编译时类型和运行时类型不一样,就形成了多态. 因为子类其 ...

  10. markdown demo 学习

    ## <center>2019-05-08 12:05 DDoS攻击检测报告</center> ## - **MME ID**: 1123424 - **DDoS攻击类型**: ...