条件选择

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

<!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. 什么是 HTTPS

    HTTPS (基于安全套接字层的超文本传输协议 或者是 HTTP over SSL) 是一个 Netscape 开发的 Web 协议. 你也可以说:HTTPS = HTTP + SSL HTTPS 在 ...

  2. VC++ 得到的函数地址与实际函数地址不一致的原因。

    我想试验一个计算汇编指令长度的代码是否正确,因而写了如下code进行验证,但结果非常奇怪 #include <stdio.h> #include <Windows.h> int ...

  3. iOS学习笔记（九）——xml数据解析

    在iPhone开发中,XML的解析有很多选择,iOS SDK提供了NSXMLParser和libxml2两个类库,另外还有很多第三方类库可选,例如TBXML.TouchXML.KissXML.Tiny ...

  4. using 关键字的使用

    using 关键字的使用主要分为两种类型:using declaration(using 声明)和using directive(using 命令): using 声明:引入特定名称空间中的一个成员. ...

  5. 在前端眼中pc端和移动的开发区别

    按照昨天所说,本包子今天将总结在前端开发中,pc端和移动端的区别,整理完这些区别,本包子将开始整理pc端的布局,会写实际的代码了,还是那句话,希望文章中有什么不足的地方,大家能多多指正,大家一起进步, ...

  6. Martin Fowler’s Active Record design pattern.

    P of EAA: Active Record https://www.martinfowler.com/eaaCatalog/activeRecord.html Active Record An o ...

  7. 亚马逊订单api重构 api异常入库 在php中执行python

    https://docs.python.org/2/library/xml.etree.elementtree.html python  较 php能更高效第处理xml xpth php  扮演什么角 ...

  8. 批处理 ECHO命令输出空行

    众所周知,如果echo后面跟一个环境变量,但是该变量却为空时,相当于不加任何参数的echo,即输出当前echo是on还是off.很多文章或者教程给出的解决方案都是在echo后面加一个点号echo.,这 ...

  9. 插叙LTE-2

      LTE TDD与LTE FDD技术简介和比较 标签: 频分双工(FDD) 时分双工(TDD) LTE 摘要:UTRA 的长期演进(Long Term Evolution ,LTE) 技术存在LTE ...

  10. Python3.6全栈开发实例[008]

    8.有如下变量(tu是个元祖),请实现要求的功能:tu = ("alex", [11, 22, {"k1": 'v1', "k2": [&q ...