条件语句：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. oracle问题之数据库恢复（三）

    可能很多人在做数据库恢复时,都遇到过如下错误: SQL> recover database; ORA: recovery session canceled due to errors ORA: ...

  2. DirectX11 With Windows SDK--29 计算着色器：内存模型、线程同步；实现顺序无关透明度(OIT)

    前言 由于透明混合在不同的绘制顺序下结果会不同,这就要求绘制前要对物体进行排序,然后再从后往前渲染.但即便是仅渲染一个物体(如上一章的水波),也会出现透明绘制顺序不对的情况,普通的绘制是无法避免的.如 ...

  3. 曹工说Spring Boot源码（15）-- Spring从xml文件里到底得到了什么（context：load-time-weaver 完整解析）

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  4. Linux文件和目录权限实战讲解

    一 相关课程回顾1.1 linux文件类型当执行ls -l或ls -la 命令后显示的结果中最前面的第2~10个字符是用来表示文件权限 第一个字符一般用来区分文件和目录: d:表示是一个目录,事实上在 ...

  5. 实验19：Frame-Relay

    实验16-1. 帧中继多点子接口 Ø    实验目的通过本实验,读者可以掌握如下技能:(1) 帧中继的基本配置(2) 帧中继的静态映射(3) 多点子接口的应用Ø     实验拓扑 实验步骤n  步骤1 ...

  6. django 发布会签到系统web开发

    引言 最近学习了虫师的发布会签到系统demo,结合自己所学django知识,对demo重新塑造了一下.也是为了练练手,巩固知识.现在就分享一下成果~ Django工作流 学习django web开发, ...

  7. nginx命令行及演示：重载、热部署、日志切割

    重载配置文件 nginx -s reload 热部署(升级nginx) 首先备份二进制文件 cp nginx nginx.old  拷贝新版本的nginx替换以前的nginx二进制文件 cp  ngi ...

  8. Go语言中的单例模式（翻译）

    在过去的几年中,Go语言的发展是惊人的,并且吸引了很多由其他语言(Python.PHP.Ruby)转向Go语言的跨语言学习者. Go语言太容易实现并发了,以至于它在很多地方被不正确的使用了. Go语言 ...

  9. 对特殊方法的访问 - Special method lookup

    对特殊方法的访问 - Special method lookup 对于用户自定义的 class 来说, 特殊方法只有通过定义对象的类型object’s type (而非通过 instance 的 __ ...

  10. Windows下CMD常用命令

    清理DNS的缓存 ipconfig /flushdns 查看dns nslookup 重置socket服务 netsh winsock reset 重置tcp/ip协议栈 netsh int ip r ...