条件与循环

条件判断使用 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. QuartzNet 任务管理系统

    最近有面试!都有问道Quartz方面的问题,之前的项目有使用过,也知道怎么用,但面试时要说出它的原理,一时半会还真说不来!查阅了一些资料先记录下来吧 Quartz.NET官网地址:https://ww ...

  2. mouseover mouseleave

    mouseover在当鼠标移入元素或其子元素的时候都会触发,是一个重复触发,冒泡的过程.见下面例子,一个父元素包含一个子元素,在其父元素内滑动鼠标,超出子元素的范围时,也会触发事件. 而mouseen ...

  3. 封装函数（累计和、K型、金字塔）

    // 假设有个函数,只要传参数进去,就能统计累加的结果 function test($n){ if($n==1){ return 1; } return $n+test($n-1);}echo tes ...

  4. C# 字符串补位方法

    string i=9; 方法1:Console.WriteLine(i.ToString("D5")); 方法2:Console.WriteLine(i.ToString().Pa ...

  5. Dev GridControl 子集合标题

    显示效果: 设置: this.gridView3.OptionsView.ShowViewCaption = true; this.gridView3.ViewCaption = "资产明细 ...

  6. IIS发布问题解决

    一. HTTP Error 502.5 - ANCM Out-Of-Process Startup Failure ://安装AspNetCoreModule托管模块后执行1. net stop wa ...

  7. 【转载】IIS一个网站如何绑定多个主机域名

    在IIS Web服务器的网站配置的过程中,有时候需要一个网站配置对应多个域名记录,例如不带www的主域名以及带www的域名解析记录对应同一个网站文件,此时最简单的配置方法就是将一个网站绑定多个主机域名 ...

  8. ssh免密登陆（简单快捷）

    介绍免密登陆配合下边这张图可以了解下过程: 假设现在A要通过免密登陆B 在A上的操作: 1.终端输入ssh-keygen (后边可以指定加密算法:-t 算法,如果不指定就是默认的rsa) 原理: 首先 ...

  9. Vue路由的使用和route-link router-view样式和动画的设置

    什么是路由 后端路由:**对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源: 前端路由:**对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面 ...

  10. C#导出和导入Excel模板功能

    引用  Aspose.Cells; 基于WinForm 导入 private void btn_excel_input_Click(object sender, EventArgs e) { try ...