<!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. D3.js比例尺 序数比例尺(v3版本)

    上一章介绍了阈值比例尺:https://www.cnblogs.com/littleSpill/p/10825038.html.到目前所有的定量比例尺已经介绍完了. 现在给大家介绍一下序数比例尺. 定 ...

  2. PROJECT | 四则运算UI设计 - PSP表格&需求分析

    PSP表格(TP版) 需求分析 [GUI编程语言选择] 考虑到Java编写GUI效率偏低且界面不算特别美观(即使有Windowbuilder插件帮助),所以我们使用控件更多,开发效率更高,具有集成开发 ...

  3. 2018-10-8-3分钟教你搭建-gitea-在-Centos-服务器

    title author date CreateTime categories 3分钟教你搭建 gitea 在 Centos 服务器 lindexi 2018-10-08 09:54:39 +0800 ...

  4. 使用<script>标签在HTML网页中插入JavaScript代码

    新朋友你在哪里(如何插入JS) 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要 ...

  5. vue cli3使用webpack4打包优化

    去掉console.log,以及开启gzip const CompressionPlugin = require('compression-webpack-plugin');//引入gzip压缩插件 ...

  6. 搜索框下面显示提示数据（数据是ajax读取）

    1.前台页面 <div style="margin: 0 auto"> <input type="text" id="wenxian ...

  7. struts2类型转换2

    如何自定义类型转换器 ? 1). 为什么需要自定义的类型转换器 ? 因为 Struts 不能自动完成 字符串 到 引用类型 的 转换. 2). 如何定义类型转换器: I. 开发类型转换器的类: 扩展 ...

  8. cordova 插件发布到 npm

    cordova 插件发布到 npm Cordova插件开发(3)- 将Cordova插件发布到npm could not find an installed version of gradle eit ...

  9. leetcode-212-单词搜索②

    题目描述: 第一次提交:(超出时间限制) class Solution: def findWords(self, board: List[List[str]], words: List[str]) - ...

  10. thinkphp 模版引擎

    系统支持原生的PHP模板,而且本身内置了一个基于XML的高效的编译型模板引擎,系统默认使用的模板引擎是内置模板引擎,关于这个模板引擎的标签详细使用可以参考模版引擎部分. 内置的大理石平台检定规程模板引 ...