条件语句：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. shiro 基础使用

    引 言 相关内容 : https://blog.csdn.net/superyayaya/article/details/94408805 在web 中, 不同角色的用户, 具有不同的访问权限, 有的 ...

  2. MVVM的理解和Vue的生命周期

    一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...

  3. centos7安装OTRS6

    1.在文件/etc/selinux/config中配置SELINUX=disabled 重启系统.重启后确认命令getenforce返回为Disabled 2.配置数据库 我们这里使用MariaDB ...

  4. python day02练习和作业

    # 1.请用代码实现:利用下划线将列表的每一个元素拼接成字符串,li＝[‘alex’, ‘eric’, ‘rain’]# li=['alex','eric','rain']# print('_'.jo ...

  5. 学习Qt的资源-网站、论坛、博客等

    来自<零基础学Qt 4编程>一书的附录 附录C Qt资源 C.1 Qt 官方资源 全球各大公司以及独立开发人员每天都在加入 Qt 的开发社区.他们已经认识到了Qt 的架构本身便可加快应用程 ...

  6. Spring基础(一)_控制反转(IOC)

    Spring-IOC 1.简述 1.1 依赖注入DI 现实开发中,每一个应用都会由两个或多个类组成,这些类之间相互协作完成特定的业务逻辑.根据传统做法,每个对象负责管理与自己协作的对象的引用(也就是, ...

  7. Shell: 定期存档日志文件

    简介 对于日志的分割删除我们一般会使用logratate,但对于项目较多的情况下,会让开发直接将日志分割写在代码里面,对于分割后过期的日志定期删除就很有必要,不然膨胀的日志会占满你的磁盘,将多余的日志 ...

  8. 快速应用开发（RAD）平台 - 20 年的演进

    过去几年中,现代软件开发的整体环境发生了巨大的变化.对我个人来说,这种变化与宇宙的加速膨胀差不多.第二个千年刚到来时,产业的发展看起来还不是那么快,只是逐步在前进.现在技术发展的复杂度和多样性已经可以 ...

  9. 关于线段树的感悟(Segment Tree)

    线段树的感悟 : 学过的东西一定要多回头看看,不然真的会忘个干干净净. 线段树的 Introduction : English Name : Segment Tree 顾名思义 : 该数据结构由两个重 ...

  10. 大数据篇：Zookeeper

    Zookeeper 1 Zookeeper概念 Zookeeper是什么 是一个基于观察者设计模式的分布式服务管理框架,它负责和管理需要关心的数据,然后接受观察者的注册,一旦这些数据的状态发生变化,Z ...