条件选择

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

<!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. JavaScript中trim 方法实现

    Java中的 String 类有个trim() 能够删除字符串前后的空格字符.jQuery中也有trim()方法能够删除字符变量前后的字符串. 可是JavaScript中却没有对应的trim() 方法 ...

  2. Redis 3 在CentOS 6.5上安装笔记，含启动脚本

    Redis的强大就不多说了,直接上菜. 第1步:下载.编译.安装 cd /opt wget http://download.redis.io/releases/redis-3.0.5.tar.gz . ...

  3. jQuery实现3D幻灯片

    先看下效果图: 看到这个酷炫的效果有没有很眼馋啊!接下来我们就一起来学习实现它吧. 1.看到效果后我们先分析这个dom要怎么实现! 首先我们要用一个大容器包裹内容,其次这个看起来像是3d效果的图片实际 ...

  4. Tesseract–OCR 库原理探索

    一,简介: Tesseract is probably the most accurate open source OCR engine available. Combined with the Le ...

  5. 第一章----python简介

    1.python简介 定义:python是一种计算机程序设计语言,是一种相当高级的语言,是用来编写应用程序的高级编程语言: 特点:优势:简单易用:提供了非常完善的基础代码库:优雅,明确,简单.劣势 : ...

  6. python 中NumPy和Pandas工具包中的函数使用笔记（方便自己查找）

    二.常用库 1.NumPy NumPy是高性能科学计算和数据分析的基础包.部分功能如下: ndarray, 具有矢量算术运算和复杂广播能力的快速且节省空间的多维数组. 用于对整组数据进行快速运算的标准 ...

  7. odata配置控制器方法路由1

    查看edmx:http://localhost:12769/odata/$metadata 1.配置 ODataConventionModelBuilder builder = new ODataCo ...

  8. jmGraph：一个基于html5的简单画图组件

    jmGraph:一个基于html5的简单画图组件 特性: 代码书写简单易理解 面向对象的代码结构 对图形控件化 样式抽离 模块化:入seajs实现模块化开发 兼容性:暂只推荐支持html5的浏览器:i ...

  9. #1589 : 回文子串的数量(Manacher)

    #1589 : 回文子串的数量 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个字符串S,请统计S的所有|S| * (|S| + 1) / 2个子串中(首尾位置不 ...

  10. Travel(最短路)

    Travel The country frog lives in has nn towns which are conveniently numbered by 1,2,…,n1,2,…,n. Amo ...