条件语句：v-if     v-else   v-else-if    v-show

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

1.v-if

<body>

<div id="app">

    <p v-if="seen">seen=true现在你看到我了</p>

    <template v-if="ok">

      <h1>ttttt</h1>

      <p>技术！</p>

      <p>哈哈哈，打字辛苦啊！！！</p>

    </template>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    seen: true,

    ok: true

  }

})

</script>

</body>

2.v-else

随机数:如若>0.5sorry 出现，否则not sorry出现

<body>

<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>

</body>

3.v-else-if

<body>

<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>

</body>

4.  v-show

<body>

<div id="app">

    <h1 v-show="ok">Hello!</h1>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    ok: true

  }

})

</script>

</body>

vue(二)--条件语句的更多相关文章

  1. vue之条件语句小结

    vue之条件语句小结 v-if, v-else 随机生成一个数字,判断是否大于0.5,然后输出对应信息: <!DOCTYPE html> <html> <head> ...

  2. vue条件语句、循环语句、计算属性、侦听器监听属性

    因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...

  3. vue条件语句v-if、v-else、v-else-if用法

    vue条件语句v-if.v-else.v-else-if用法 v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.v-if 也是惰性的:如果在初始渲 ...

  4. vue使用案例，vue初始化，vue初始化方法，vue条件语句，vue在js里面添加元素调用vue方法

     <div id="main" > <button id='but1' type="button" v-on:click="save ...

  5. 二、Python基础（input、变量名、条件语句、循环语句、注释）

    一.input用法 input在Python中的含义为永远等待,直到用户输入了值,从而将所输入的值赋值另外的一个东西. n=input('请输入......') 接下来用一个例子学习input的用法 ...

  6. 化简复杂逻辑，编写紧凑的if条件语句（二）：依据if子句顺序化简条件

    <化简复杂逻辑,编写紧凑的if条件语句>已经得出了跳.等.飞.异常的各自条件,方便起见这里重新贴一下. 立即跃迁:!a && b && d 等待跃迁:!a ...

  7. Pyhton编程（二）之变量、用户输入及条件语句

    一:变量 变量定义的规则 1)只能由数字.字母.下划线组成(不能以数字开头) 2)不能使用关键字作为变量名 ['and', 'as', 'assert', 'break', 'class', 'con ...

  8. php条件语句（二）

    switch 语句用于根据多个不同条件执行不同动作. PHP Switch 语句 如果您希望有选择地执行若干代码块之一,请使用 switch 语句. 语法 switch (n){case label1 ...

  9. Python编程基础[条件语句if 循环语句 for，while]（二）

    ython条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 可以通过下图来简单了解条件语句的执行过程: if 判断条件: 执行语句……else: 执行语句…… x= ...

随机推荐

  1. 【阿里云IoT+YF3300】12.阿里云IoT Studio入门介绍

    阿里云IoT Studio是针对物联网场景提供的生产力工具,可覆盖各个物联网行业核心应用场景,帮助您高效经济地完成设备.服务及应用开发.物联网开发服务提供了移动可视化开发.Web可视化开发.服务开发与 ...

  2. hash模式与history模式

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  3. Redis异常 | DENIED Redis is running in protected mode because protected mode is enabled

    背景 今天重新搭了个redis环境,用简单的代码去测试下是否正常, @RunWith(SpringRunner.class) @SpringBootTest public class Springbo ...

  4. Linux系统实现ansible自动化安装配置httpd

    1.使用ansible的playbook实现自动化安装httpd 1)首先配置好ansible的hosts文件,让其对应主机能够受ansible控制 提示:我们在主机清单上配置了所管控的主机地址,但是 ...

  5. 视觉slam十四讲课后习题ch3-7

    题目回顾: 设有小萝卜一号和小萝卜二号位于世界坐标系中,小萝卜一号的位姿为:q1=[0.35,0.2,0.3,0.1],t2=[0.3,0.1,0.1]^T (q的第一项为实部.请你把q归一化后在进行 ...

  6. Java集合XMind与注意事项

    Java中集合使用时的几个注意事项: 1.ArrayList和HashMap都具有扩容 ArrayList初始化数组长度为10,扩容后的容量为原来的1.5倍. HashMap初始化的数组长度为16,扩 ...

  7. HYSBZ_2002_分块

    http://www.lydsy.com/JudgeOnline/problem.php?id=2002 分块基础题,初次接触,很巧妙. OJ好像挂了,没法提交. #include<iostre ...

  8. POJ_1185_状态压缩dp

    http://poj.org/problem?id=1185 一次考虑两行,比一行略为复杂.sta保存每种状态炮兵位置,sum保存每种状态当行炮兵总数,a保存地形,dp[i][j][k]表示到第i行当 ...

  9. VFP控制Excel操作集

    ◆访问EXCEL:ExcelSheet = GetObject('','Excel.Sheet')返回结果为类,则成功.例:ExcelSheet = GetObject('','Excel.Sheet ...

  10. python3 ansible api 命令和playbook

    一.api代码 # coding: utf-8 import os import sys from collections import namedtuple from ansible.parsing ...