条件选择

条件选择的用法和其他语言类似，一个例子就能解决所有问题

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="https://unpkg.com/vue"></script>

</head>

<body>

    <div id="app-1">

        <div v-if="number > 90">

            {{ number }}分，牛逼

        </div>

        <div v-else-if="number > 60">

            {{ number }}分，还行吧

        </div>

        <div v-else-if="number > 20">

            {{ number }}分，要努力了

        </div>

        <div v-else>

            {{ number }}分，废了

        </div>

    </div>

    <script type="text/javascript">

        var vm1 = new Vue({

            el: '#app-1',

            data: {

                number: Math.round(Math.random() * 100)  //随机0到100的整数

            }

        })

    </script>

</body>

</html>

随机出一个分数，将值赋给number，通过对number值的判断显示符合条件的内容

v-if与v-show

<div id="app-2">

    <span v-if="isVisible">Hello, TanSea!</span>

    <span v-show="isVisible">Hello, TanSea!</span>

</div>

<script type="text/javascript">

    var vm2 = new Vue({

        el: '#app-2',

        data: {

            isVisible: false

        }

    })

</script>

v-if与v-show在用法上是一样的，最终展示出来的结果也是一样的，区别在于

v-if：真实的条件渲染，在条件为假时什么也不做，有更高的切换消耗，适应于不怎么切换的场景

v-show：始终被编译并保留，只是简单的用CSS做切换，有更高的初始渲染消耗，适应于频繁切换的场景

Vue.js学习笔记 第三篇 条件渲染的更多相关文章

  1. Vue.js学习笔记 第四篇 列表渲染

    遍历数组和对象 和条件选择一样,循环也和其他语言类似,也尝试着用一个例子解决问题 <!DOCTYPE html> <html> <head> <meta ch ...

  2. Vue学习笔记（三）条件渲染和循环渲染

    目录 一.条件渲染 1. v-if 2. 与v-else配合使用 3. 与v-else-if配合使用 4. v-show的使用 5. 类型切换案例 二.列表渲染 1. 遍历数组 2. 遍历对象 获取v ...

  3. Vue.js学习笔记（三） - 修饰符

    本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点“.”连接修饰符名 ...

  4. Vue.js学习笔记 第七篇 表单控件绑定

    本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...

  5. Vue.js学习笔记 第八篇 组件

    全局注册组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  6. Vue.js学习笔记 第六篇 内置属性

    computed属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  7. Vue.js学习笔记 第五篇 事件处理

    监听事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  8. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  9. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

随机推荐

  1. 添加可点击的imagebottom，有个点击动画效果

    android添加可点击的按钮,有个动画切换 ,首先定义一个 res/drawable中定义一个 btn_shutter_background.xml,其定义举例如下: <?xml versio ...

  2. JDK之ThreadLocal分析

    ThreadLocal是在是Thread的一个局部变量,今天我来分析了一下这个类 先看ThreadLocal的set方法 public void set(T value) { Thread t = T ...

  3. CodeMirror：基于JavaScript的代码编辑器

    官方网站定义: http://codemirror.net/ CodeMirror is a versatile text editor implemented in JavaScript for t ...

  4. uva 12730(期望经典)

    选自: http://blog.csdn.net/myhelperisme/article/details/39724515 用dp(n)表示有n个位置时的期望值,那么,对于一个刚进来的人来说,他有 ...

  5. #1560 : H国的身份证号码II(dp+矩阵快速幂)

    #1560 : H国的身份证号码II 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 H国的身份证号码是一个N位的正整数(首位不能是0).此外,由于防伪需要,一个N位正整 ...

  6. 合并子目录(hash)

    题目2 : 合并子目录 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi的电脑的文件系统中一共有N个文件,例如: /hihocoder/offer22/soluti ...

  7. Parenthesis(前缀和+线段树)

    1809: Parenthesis Time Limit: 5 Sec     Memory Limit: 128 Mb     Submitted: 2291     Solved: 622 Des ...

  8. EasyNVR摄像机无插件流媒体服务器对所在操作系统配置的需求

    背景需求 随着EasyNVR使用的用户越来越多,用户在使用过程中的常见问题我们也做出了一定的总结,以及在升级到3.0版本之后,我们的启动方式和配置 功能也有了一些改变.因此在此做出一些总结. 对于Ea ...

  9. IDEA : Git Pull Failed 解决（IDEA中使用stash功能）

    一.问题: 本地要commit代码,commit之前需pull代码,但pull提示冲突.如下 Git Pull Failed Your local changes would be overwritt ...

  10. 分界线<hr/>

    <hr align="center" noshade="noshade" width="90px" color="#1DAB ...