条件语句：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. 使用GoldenGate完成MySQL到MySQL的同步

    (一)基础环境配置   源库 目标库 操作系统版本 CentOS Linux release 7.4 CentOS Linux release 7.4 IP地址 192.168.10.11 192.1 ...

  2. C++静态成员函数小结

    类中的静态成员真是个让人爱恨交加的特性.我决定好好总结一下静态类成员的知识点,以便自己在以后面试中,在此类问题上不在被动.  静态类成员包括静态数据成员和静态函数成员两部分.  一 静态数据成员:  ...

  3. Exchange邮件服务器安全

    Exchange是由微软推出的用于企业环境中部署的邮件服务器.Exchange在逻辑上分为三个层次:网络层(network layer).目录层(directory layer).消息层(messag ...

  4. 快速了解Lambda表达式-Java

    目录 lambda表达式 前言 简介 简单入门 用法 好处 总结 lambda表达式 前言 最近因为疫情,也不能正常返校什么的,希望大家都能好好的,希望武汉加油,中国加油,在家也看了很多视频,学了一点 ...

  5. java8数组

    public class jh_01_为什么需要数组 { public static void main(String[] args) { int [] arr = new int[5]; // in ...

  6. python笔记21（面向对象课程三）

    今日内容 嵌套 特殊方法:__init__ type/isinstance/issubclass/super 异常处理 内容回顾 def login(): pass login() class Acc ...

  7. 一个"/"引发的惨案

    今天行云流水写了一个接口,正想着写完就睡觉了,结果访问的时候一直报错404,找不到路径,我反复检查了好久,确定路径名字没写错,百思不得其解,瞬间有想砸电脑的冲动,于是准备洗洗睡了,明天再搞 洗玩脚回到 ...

  8. GitHub新手教学(从新手安装到初步使用)

    版权声明:本文为博主原创文章,转载请标明出处! 博客地址:http://blog.csdn.net/qazwsxpcm https://blog.csdn.net/qazwsxpcm/article/ ...

  9. new 的实现原理

    自己封装一个new <script> // 创建一个构造函数 function Father() { this.name = '小红'; this.eat = function () { ...

  10. JMeter之If Controller深究二

    1.背景 接上文JMeter之If Controller深究一,在上文中提到压测采用的是JMeter3.1版本,本篇继续深究.基本确定问题原因后,宝路这边又做了不同版本的JMeter对比实验,这次加入 ...