<!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. R:ggplot2数据可视化——进阶(3)

    Part 3: Top 50 ggplot2 Visualizations - The Master List, 结合进阶1.2内容构建图形 有效的图形是: 不扭曲事实 传递正确的信息 简洁优雅 美观 ...

  2. 机器突然宕机导致hdfs启动一直超时的行为

    今天手里其中一个集群几个机器突然宕机,启动hdfs一直超时. clouder-scm-agent主要报了这个错RROR: Unexpected error 'getpwuid(): uid not f ...

  3. myeclipse问题

    eclipse使用过程中发现汉字太小,几乎不可辨识. 更改办法:eclipse界面依次选择“window”–“preference”–“general”–“appearance”–“color and ...

  4. 用多线程发送邮箱（一次给一个用户发送N封邮件）

    前台不用写,后台执行方法就可以了. namespace SendMail { public partial class SendMail_Page : System.Web.UI.Page { pro ...

  5. asprise-ocr-api-sample 高价收破解版64 32位

    asprise-ocr-api-sample验证码 高价收破解版64 32位 Reflector 8.5 打开自己的C#代码  完全100%的反编译了

  6. 实现虚拟机VMware上Linux与本机windows互相复制与粘贴的问题

    解决方法:只需要在Linux系统中安装一个vmware-tools的工具 1.选择虚拟机菜单,有安装vmware tools 工具的选项 点击之后,在Linux的桌面下会出现 VMwareTools. ...

  7. 一个切图仔的 JS 笔记

    1,常用数据操作 Math.round(mum,2);num.toFixed(2);两位数 Math.floor(); 返回不大于的最大整数 Math.ceil(); 则是不小于他的最小整数 Math ...

  8. 【JZOJ6378】小w与数字游戏(game)

    description analysis 对于\(n\)很大,一眼看出来肯定有两个相等的数减出来是\(0\),答案肯定是\(0\) 其实只要\(n>7\),由于斐波那契数列,肯定能有几个数的和减 ...

  9. vuecli脚手架+vue+vuex实现vue驱动的demo。

    哎呀呀呀,现在大家都要会Vue ||  React,否则感觉跟这个前端的世界脱节了一样. start: vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-de ...

  10. Java中关于注释、标识符、变量、常量、数据类型、类型转换、转移字符以及数值型的表现形式的详解

    Java文件的注意事项 在同一个Java文件中,可以定义多个类,但是被public修饰的类只能够有一个,并且此类名要与文件名一致. 在同一个类中,可以定义多个方法,但是名字叫做main的方法只能有一个 ...