条件选择

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

<!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. 基于jQuery表格增加删除代码示例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. centos7 笔记本盒盖不睡眠

    cd /etc/systemd vi logind.conf 动作包括:HandlePowerKey:按下电源键后的动作HandleSleepKey:按下挂起键后的动作HandleHibernateK ...

  3. 1. 写出一个能创建多级目录的 PHP 函数(新浪网技术部)

    function create_dir($path,$mode){ if (is_dir($path)){ echo "该目录已经存在"; }else{ if(mkdir($pat ...

  4. HDOJ 5044 Tree

    树链剖分裸题. . .. 又要扩栈又要输入挂还卡格式....真无语 Tree Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 6553 ...

  5. eclipse中如何查看一个android模拟器的内部文件

    eclipse中如何查看一个android模拟器的内部文件,有时要在其中添加一个文件夹或是什么的,要手动的做这件事,而不能够用代码去完成时,就要用这个方法了. 1.首先,打开一个安卓模拟器. 2.这个 ...

  6. 编写自己的cp命令

    有时候要对整个目录做备份,修改cp1.c使得当两个参数都是目录时,把第一个目录中的所有文件复制到第二个目录中,文件名不变.那么该如何实现? 我们先来看看cp1.c的实现方式,它从一个文件中读取数据然后 ...

  7. 【BZOJ1977】[BeiJing2010组队]次小生成树 Tree 最小生成树+倍增

    [BZOJ1977][BeiJing2010组队]次小生成树 Tree Description 小 C 最近学了很多最小生成树的算法,Prim 算法.Kurskal 算法.消圈算法等等. 正当小 C ...

  8. 郭大侠与Rabi-Ribi (优先队列)

    最近郭大侠迷上了玩Rabi-Ribi这个游戏. Rabi-Ribi呢,是一个打兔子的动作冒险游戏,萌萌哒的兔子在地上跑来跑去,好萌好萌呀~ 这个游戏是这样玩的,郭大侠作为一个主角,拿着一个小锤子,他的 ...

  9. 关于微信小程序的尺寸关系

    在微信小程序开发中,大家尽量使用rpx为单位, px实际上就是系统级的rem(把页面按比例分割750份,1rpx=window.innerWidth/750),或者scale伸缩布局的width=75 ...

  10. General Decimal Arithmetic 浮点算法

    General Decimal Arithmetic http://speleotrove.com/decimal/ General Decimal Arithmetic [ FAQ | Decima ...