条件选择

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

<!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. diamond源码阅读-循环探测配置信息是否变化rotateCheckConfigInfo

    rotateCheckConfigInfo 这是一个定时任务,循环调用 /** * 循环探测配置信息是否变化,如果变化,则再次向DiamondServer请求获取对应的配置信息 */ private ...

  2. 使用shell脚本守护node进程

    现在开源的守护node进程的包有不少,比如forever,pm2,这里我就不再赘述了. 但是有的公司生产服务器是不能联网的,而这些包都需要全局安装,必须要网络环境.难道你nohup node app. ...

  3. go http的三种实现---1

    package main import ( "io" "log" "net/http" ) func main() { //设置路由 htt ...

  4. Java+selenium自动化测试基础

    Java+selenium maven配置 maven的配置,但还需要建立maven的本地库,修改apach-maven的setting.xml http://www.cnblogs.com/haoa ...

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

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

  6. Digit Division

    Digit Division Time limit: 1 s Memory limit: 512 MiB We are given a sequence of n decimal digits. Th ...

  7. Frosh Week(归并排序求逆序数)

    H - Frosh Week Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Desc ...

  8. 巨蟒python全栈开发linux之centos7

    1.crm项目部署回顾(小BOSS) crm部署 nginx+uwsgi+django+mysql nginx    前端 uwsgi+django     后端 mysql   数据支撑 crm是一 ...

  9. 【题解】Journeys(线段树优化连边)

    [#3073. Pa2011]Journeys (线段树优化连边) 这张图太直观了,直接讲透了线段树优化连边的原理和正确性. 考虑建立两颗线段树,一颗是外向树,一颗是内向树,相当于网络流建模一样,我们 ...

  10. .Net自带ChartControl报错：Auto interval does not have proper value

    出现这个错误的原因是我们给ChartControl同时设置了Minimum和Maxmum的值,而这两个值又恰好相等. chart.ChartAreas[0].AxisY.Minimum=min; ch ...