<!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. 【POJ】1797 Heavy Transportation

    题目链接:http://poj.org/problem?id=1797 题意:n个城镇,m条路上能承载的最大重量.现在问你从1到n的最大承重量. 题解:spfa的变体. 假设当前1->当前点的承 ...

  2. elasticsearch实现读写分离

    简介 今天我们不讲三国,我们讲一讲elasticsearch(以下简称ES)读写分离,这是个好东西,全文索引的时候使用它贼得劲,对elasticsearch索引原理不太清楚的,请自行查找相关的文章 这 ...

  3. 如何通过SVN管理好代码

    来自:http://blog.csdn.net/baronyang/article/details/6942434 ------------------------------------------ ...

  4. 关于__init__.py

    假设程序目录结构如下: ├── checkpoints/ ├── data/ │ ├── __init__.py │ ├── dataset.py │ └── get_data.sh ├── mode ...

  5. css之页面三列布局之左右上下高度固定,中间自适应

    第一种,绝对定位 !DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <tit ...

  6. 整理下webapi的一些琐碎事情

    在使用webapi的时候我们会遇到一些问题比如 1.POST怎么请求 2.怎么兼容JSONP请求 3.怎么给指定端提供跨域的请求 4.怎么显示单独的models层的注释 问题一二其他人都玩的比较成熟的 ...

  7. yii2中使用定义在 params.php文件中的配置

    yii2 使用 配置文件中在 params 的配置, 可以用 Yii::$app->params['key1']形式访问 参考 yii can't access Yii::$app->pa ...

  8. python读文件判断是否已到EOF

    python读文件判断是否已到EOF,也即结尾,一般其它语言都是以EOF直接来判断的,比如 if ( fp.read(chunk_size) == EOF), 但python到结尾后是返回空字符串的, ...

  9. [HEOI 2018]一双木棋

    题意:求对抗分数差值最大. 思路:状压dp,维护一条轮廓线,最大化分差.可以发现上一行的棋子个数永远比这一行多. #include<bits/stdc++.h> using namespa ...

  10. sql还原数据库时候改变数据库名

    需求:在做图书馆数据整合时候,由于有两个校区,用的是分离开的同一个数据库,数据库名字都一样的,现在我要整合在一起,我的想法是把两个数据库先还原到我本地,用写好的脚本整合到一起.所以,我还原两个数据库时 ...