条件与循环

条件判断使用 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. Educational Codeforces Round 64 (Div. 2)

    A.3*3讨论即可,注意正方形套圆套三角形只有6个点. #include<cstdio> #include<cstring> #include<iostream> ...

  2. SqlServer中Index Seek的匹配规则(一)

    我们知道在SqlServer中,索引对查询语句的优化起着巨大的作用,一般来说在执行计划中出现了Index Seek的步骤,我们就认为索引命中了.但是Index Seek中有两个部分是值得我们注意的,我 ...

  3. SQL Server存储过程中字符串前加N的含义

    使用方法: N'字符串' 解释: 意思为后面的数据类型为NChar或者NVarchar 使用N前缀 在服务器上执行的代码中(例如在存储过程和触发器中)显示的Unicode字符串常量必须以大写字母N为前 ...

  4. Gogs搭建私有git代码仓库

    前置环境: 数据库 -> mysql git -> 服务端和客户端版本必须>=1.8.3 ssh服务 -> 如果只使用http/https方式的话,服务端无需配置ssh. st ...

  5. django pk 和id用法

    pk就是primary key的缩写,也就是任何model中都有的主键,那么id呢,大部分时候也是model的主键,所以在这个时候我们可以认为pk和id是完全一样的. class Student(mo ...

  6. vue多页面项目搭建(vue-cli 4.0)

    1.创建vue项目 cmd命令执行 vue create app (app 自定义的项目名) 一般都会选择后者,自己配置一下自己需要的选项(空格为选中) 这是我个人需要的一些选项,路由Router.状 ...

  7. C++ 基础知识汇总 持续更新

    摘录一些C++面试常考问题,写一些自己的理解,花了挺长时间的,作图是真的累,欢迎来摘果子. static关键字 用于声明静态对象: 静态函数只在本文件可见.(默认是extern的) 全局静态对象:全局 ...

  8. Yarn介绍(设计理念与基本架构)

    Yarn : 新的计算框架,是一个全局资源管理器,负责整个集群的资源管理和分配   一. Yarn产生背景       Hadoop1.0MR有局限性,概括为以下几个方面 :  扩展性差 可靠性差 资 ...

  9. webpack中bundler源码编写2

    通过第一部分的学习,我们已经可以分析一个js的文件.这节课我们学习Dependencies Graph,也就是依赖图谱.对所有模块进行分析.先分析index.js.index.js里面引入了messg ...

  10. -bash: zip: command not found提示解决办法

    -bash: zip: command not found是因为liunx服务器上没有安装zip命令,需要安装一下即可linux安装zip命令:apt-get install zip 或yum ins ...