<!DOCTYPE html>

<html lang="zh">

<head>

    <title></title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <link href="../css/style.css" rel="stylesheet"> </head>

<body>

<div id="myApp">

    <h1 v-if="result == 0">成绩未公布</h1>

    <h1 v-else-if="result < 60">{{result}}分 - 考试不及格</h1>

    <h1 v-else-if="result < 80">{{result}}分 - 还需努力</h1>

    <h1 v-else>{{result}}分 - 考得不错，玩游戏吧！</h1>

    <button @click="btnClick">考试成绩</button>

</div>

<script>

    var myApp = new Vue({

        el: '#myApp',

        data: {

            result: 0

        },

        methods: {

            btnClick: function(){

                this.result = Math.round(Math.random() * 100);

            },

        },

    });

</script>

</body>

</html>

条件渲染v-if的更多相关文章

  1. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  2. 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶

    今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...

  3. 第六十三篇：Vue的条件渲染与列表渲染

    好家伙, 1.条件渲染v-if 1.1.v-if基本使用 <body> <div id="app"> <p v-if="flag" ...

  4. CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率

    CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率 当场景中有比较复杂的模型时,条件渲染能够加速对复杂模型的渲染. 条件渲染(Conditio ...

  5. 微信小程序-视图条件渲染

    条件渲染 wx:if 在框架中,我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: <view wx:if="{{condition} ...

  6. 关于vue.js中条件渲染的练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

  7. Vue#条件渲染

    根据不同的条件,响应不同的事件. https://jsfiddle.net/miloer/zed5p1r3/ 可以用template来包装元素,当然浏览器的最终渲染结果不会包含它.我觉得主要用它来自定 ...

  8. 03-Vue入门系列之Vue列表渲染及条件渲染实战

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...

  9. Vue条件渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08 一 v-if显示单个元素 注意else只能跟在v-if或者v-s ...

  10. Vue.js学习 Item7 -- 条件渲染与列表渲染

    v-if 在字符串模板中,如 Handlebars,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1 ...

随机推荐

  1. <爬虫实战>豆瓣电影TOP250（三种解析方法）

    1.豆瓣电影排行.py # 目标:爬取豆瓣电影排行榜TOP250的电影信息 # 信息包括:电影名字,上映时间,主演,评分,导演,一句话评价 # 解析用学过的几种方法都实验一下①正则表达式.②Beaut ...

  2. 2008年国外50个最佳CSS设计欣赏

    这50个CSS网站是由WebDesignerWall评选出来的,很具参考价值.我们在欣赏的同时,也能从中吸取很多灵感,也能从它们的源代码中学习更高级的CSS技术.今年,越来越多的设计师开始使用超大的背 ...

  3. Java超简明入门学习笔记（一）

    Java编程思想第4版学习笔记(一) 第二章 一切都是对象(Hello World)          这个笔记本主要记录了我在学习Java编程思想(第4版,中文版)的过程中遇到的重难点及其分析.主要 ...

  4. 基于第三方开源库的OPC服务器开发指南（4）——后记：与另一个开源库opc workshop库相关的问题

    平心而论,我们从样例服务器的代码可以看出,利用LightOPC库开发OPC服务器还是比较啰嗦的,网上有人提出opc workshop库就简单很多,我千辛万苦终于找到一个05年版本的workshop库源 ...

  5. 关于DB9一些信号的缩写

    https://www.cnblogs.com/CCJVL/archive/2010/02/04/1663565.html 场景:PCB板子与PC通过RS232连接,以下信号的方向相对于PCB板子而言 ...

  6. 阿里云 Aliplayer高级功能介绍(三)：多字幕

    基本介绍 国际化场景下面,播放器支持多字幕,可以有效解决视频的传播障碍难题,该功能适用于视频内容在全球范围内推广,阿里云的媒体处理服务提供接口可以生成多字幕,现在先看一下具体的效果: WebVTT格式 ...

  7. SQLServer 中存储过程

    SQLServer 中存储过程返回的三种方式( 包括存储过程的创建, 在存储过程中调用, 在VS中调用的方法)存储过程有三种返回:   1.   用return返回数字型数据   2.   用返回参数 ...

  8. FHS 文件层次标准

    FHS:文件层次标准 操作系统自身运行使用的 /bin: 存放可执行的二进制程序,管理员和普通用户都可以使用 /sbin:管理员才能执行的命令 运行正常功能的程序存放位置 /usr/bin /usr/ ...

  9. 16.ajax_case07

    # 通过搜索接口抓取etherscan上的合约地址 # https://etherscan.io/ import requests import re header = { 'Accept': 'te ...

  10. python基础语法（变量与数据类型）

    python基础语法(变量与数据类型) 一.python变量 python中的变量不需要声明.每个变量在使用钱都需要赋值,变量赋值以后,该变量才会被创建 在python中,变量就是变量,它没有类型,我 ...