条件与循环

条件判断使用 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. oracle update left join 写法

    oracle update left join 写法 (修改某列,条件字段在关联表中) 案例: E:考核表 X,:用户表 USERNAME 关联 需求:修改营业部最高分 分析:通过登录账号的营业部OR ...

  2. 使用docker安装gitlab

    我这里使用的系统是centos7 首先安装docker,docker-compose(非必须,但是使用它可以简化镜像启动参数),需要注意的是docker-compose安装依赖Python的pip,所 ...

  3. logback配置文件模板

    <?xml version="1.0" encoding="UTF-8"?> <configuration debug="false ...

  4. 三种JS截取字符串方法

    JS提供三个截取字符串的方法,分别是:slice(),substring()和substr(),它们都可以接受一个或两个参数: var stmp = "rcinn.cn"; 使用一 ...

  5. Linux三剑客及使用介绍

    Linux 三剑客是(grep,sed,awk)三者的简称,熟练使用这三个工具可以提升运维效率.Linux 三剑客以正则表达式作为基础,而在Linux系统中,支持两种正则表达式,分别为"标准 ...

  6. Linux命令——uptime

    参考:linux中uptime命令查看linux系统负载 Linux uptime command 简介 uptim告诉你系统运行了多长时间.uptime命令提供单行显示的输出,包含如下信息: 当前时 ...

  7. git使用——准备工作

    参考:如何在 Git 中重置.恢复,返回到以前的状态 初次运行 Git 前的配置 安装好Git后首先要做的便是配置Git环境.每台计算机上只需要配置一次,程序升级时会保留配置信息. 你可以在任何时候再 ...

  8. kvm虚拟机控制台登录配置

    vm虚拟机能否像xen虚拟机一样通过virsh console 一样采用字符界面进行linux虚拟机控制台呢,答案是肯定的,默认情况下该命令是不起作用的,需要修改相关文件才能实现. 本文出自:http ...

  9. zookeeper服务【-】windows安装与liunx安装

    windows安装zookeeper-3.4.14 https://www.apache.org/dyn/closer.cgi/zookeeper/ [zookeeper下载地址] 1.开启服务之前需 ...

  10. Spring Aop织入点语法

    Aspectj织入点语法: 1.execution(public * *(..))   任何类的任何返回值的任何方法 2.execution(* set*(..))       任何类的set开头的方 ...