条件语句：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. pycharm 固定模板使用者和日期

    如上图修改就可以正常修改模板了修改后每创建一个python文件就会是这种效果

  2. （转）KL散度的理解

    KL散度(KL divergence) 全称:Kullback-Leibler Divergence. 用途:比较两个概率分布的接近程度.在统计应用中,我们经常需要用一个简单的,近似的概率分布 f * ...

  3. Kubernetes-Service资源详解

    service的三种工作模式:(userstats(效率低).iptables.ipvs) service可以自动实现负载均衡.service自动实现了负载均衡,service通过selector标签 ...

  4. VC简单实现播放音乐

    #define _CRT_SECURE_NO_WARNINGS #include <string.h> #include <stdio.h> #include <wind ...

  5. VC简单操作mysql

    #include <iostream> #include <winsock.h> #include <mysql.h> #pragma comment(lib, & ...

  6. 带大家用40行python代码实现一个疫情地图

    最近两个月,因为新冠病毒无情的肆虐,相信会给每个中国人的记忆中画上重重的一笔.到今天为止,疫情形势依然十分严峻,虽然除湖北外的其他省份已经连续十一天确诊人数下降,但是接下来还有将近至少1.6亿的人口迁 ...

  7. python中元类(metaclass)的理解

    原文地址:http://www.cnblogs.com/tkqasn/p/6524879.html 一:类也是对象 类就是一组用来描述如何生成一个对象的代码. 类也是一个对象,只要你使用关键字clas ...

  8. WeChall_PHP 0817 (PHP, Exploit)

    I have written another include system for my dynamic webpages, but it seems to be vulnerable to LFI. ...

  9. ARTS Week 14

    Jan 27, 2020 ~ Feb 2, 2020 Algorithm Problem 160.Intersection of Two Linked Lists(相交链表) 题目链接 题目描述:给定 ...

  10. python之reload用法

    一.python2和python3的区别 python2中可以直接使用reload().python3中需要从库中导入,有两种方法: >>> from imp import relo ...