vue之条件语句小结

v-if, v-else

  • 随机生成一个数字，判断是否大于0.5，然后输出对应信息：
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>v-else of vue</title>

        <script src="vue.min.js"></script>

    </head>

    <body>

        <div id="app">

                <div v-if="Math.random()>0.5">

                        <span>随机数大于0.5</span>

                    </div>

                    <div v-else>

                        <span>随机数小于等于0.5</span>

                </div>

        </div>

        <script>

        new Vue({

            el: "#app",

        })

        </script>

    </body>

</html>

v-else-if

  • 在2.1.0新增，顾名思义，用作v-if的else-if 块，可以链式的多次使用：
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>v-elseif of vue</title>

        <script src="vue.min.js"></script>

    </head>

    <body>

        <div id="app">

            <input type="text" v-model="type">

            <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:'A'

            }

        })

        </script>

    </body>

</html>
  • v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-show

使用 v-show 指令来根据条件展示元素：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>v-show of vue</title>

        <script src="vue.min.js"></script>

    </head>

    <body>

        <div id="app">

            <div v-show="ok">show it</div>

        </div>

        <script>

        new Vue({

            el: '#app',

            data: {

                ok: true,

            }

        })

        </script>

    </body>

</html>

vue之条件语句小结的更多相关文章

  1. vue(二)--条件语句

    条件语句:v-if     v-else   v-else-if    v-show v-else .v-else-if 必须跟在 v-if 或者 v-else-if之后. 1.v-if <bo ...

  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】【条件语句】【循环语句】

    写在前面的: 作为一个控制专业的女研究生,不知道每天在研究什么,但总归逃脱不了码代码的命运.之前也学习过一些C语言.C++,基础嘛,稍稍微有一些.本不想走上码农的道路,天真烂漫的过此生(白日梦过程中. ...

  6. Python —条件语句

    条件语句 Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 可以通过下图来简单了解条件语句的执行过程: Python程序语言指定任何非0和非空(null ...

  7. php简写表达式，&& or || 缩写条件语句

    有时候学的多了, 好多小细节 都忘了 ,比如 简单的表达式, 三元表达式   ?:; $aa or $bb 表达式 等等! 写一些简单的表达式,备忘! php用&&和||缩写条件语句 ...

  8. java中的条件语句（if、if...else、多重if、嵌套if）

    Java条件语句之 if 生活中,我们经常需要先做判断,然后才决定是否要做某件事情.例如,如果考试成绩大于 90 分,则奖励一个 IPHONE 5S .对于这种"需要先判断条件,条件满足后才 ...

  9. javascript语句——条件语句、循环语句和跳转语句

    × 目录 [1]条件语句 [2]循环语句 [3]跳转语句 前面的话 默认情况下,javascript解释器依照语句的编写顺序依次执行.而javascript中的很多语句可以改变语句的默认执行顺序.本文 ...

随机推荐

  1. mysql之存储过程基础篇

    1.  创建/使用数据库 mysql> create database me; mysql> use me; 2.  创建表 mysql> create table Stu(Sno ...

  2. 使用HEXO建站

    使用Hexo模板 按以下指导进行本地预览和上传到你的github. 环境安装 安装node.js node.js官方下载地址https://nodejs.org/en/ 设置npm淘宝镜像站(npm默 ...

  3. Markdown列表中嵌套代码带来的问题

    目录 1.问题描述 2.原因查找 3.问题解决 使用Markdown时,在有序列表中嵌套代码块引发了有序列表编号中断(重新从1开始)的问题,最终已解决. 1.问题描述 代码: 1. title tex ...

  4. [Linux] 017 网络命令与挂载命令

    1. 网络命令:write 命令名称:write 命令所在路径:/usr/bin/write 执行权限:所有用户 语法:write [用户名] 功能描述:给用户发信息,以 Ctrl-d 保存结束 范例 ...

  5. JS事件循环，MACRO TASK，MICRO TASK

    事件循环的基本概念 JS执行的过程中,由JS引擎控制的函数调用栈来控制时间循环 定时器线程,事件触发线程,异步http请求线程控制异步的任务队列 任务分为macro task,micro task 对 ...

  6. [BZOJ1604][Usaco2008 Open]Cow Neighborhoods 奶牛的邻居 (Treap+单调队列)

    题面 了解奶牛们的人都知道,奶牛喜欢成群结队．观察约翰的N(1≤N≤100000)只奶牛,你会发现她们已经结成了几个"群"．每只奶牛在吃草的时候有一个独一无二的位置坐标Xi,Yi( ...

  7. 2.openshift授权策略和scc理解

    policy管理概念 查看policy的方式可以通过cli进行查看 Roles grant various levels of access in the system-wide cluster po ...

  8. Fiddler查看IP和响应时间

    原文:Fiddler查看IP和响应时间 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/si ...

  9. 微软Visual Studio Code基本特征

    Visual Studio Code它的核心功能还是作为一个代码编辑器.和其他的代码编辑器一样,VScode采取通用的UI和布局,浏览器在左边,显示所有的文件和文件夹,右边你打开的文件的编辑页面. 文 ...

  10. smbpasswd - Samba加密的口令文件。

    总览 SYNOPSIS smbpasswd 描述 DESCRIPTION 此文件是 Samba(7) 套件的一部分. smbpasswd是Samba加密的口令文件.文件中包含了用户名,UNIX用户ID ...