Vue常用指令v-else-if 和 v-else 结合

最新推荐文章于 2024-03-11 11:12:35 发布
最新推荐文章于 2024-03-11 11:12:35 发布
阅读量145 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/apollo1616/articles/10034227.html
版权 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p v-if="score>90">优秀</p>
    <p v-else-if="score>=80">良好</p>
    <p v-else-if="score>=60">及格</p>
    <p v-else>不及格</p>
</div>

<script>
    // 创建Vue的实例
    let app = new Vue({
        el: '#app',
        data: {
            score:96
        }
    })
</script>
</body>
</html>

 

转载于:https://www.cnblogs.com/apollo1616/articles/10034227.html

weixin_30657999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue基础语法之条件渲染(v-show,v-if)
weixin_45608136的博客
08-16 204
案例： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="root">
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
10-17
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下
Vue - v-if和v-else-if和v-else的使用
最新发布
2202_75871191的博客
03-11 1989
v-bind:或:,v-on:或@,v-for,v-if,v-show,v-model。2.不同点：v-if存在或不存在，v-show展示或不展示。v-if和v-for在vue2或vue3中都不要同时使用，v-else,v-cloak,v-once，v-pre不需要带值。当v-if后面表达式的值为false的时候显示v-else所在的元素。当v-if后面表达式的值为true的时候显示v-if所在的元素。在vue3中v-if比v-for优先级高。v-if和v-for优先级和使用事项。
v-else-if
小焊猪 - web前端
08-29 375
&lt;div id="app5"&gt; &lt;div v-if="status == 'loading'"&gt; &lt;div style="background-color:blue"&gt;loading&lt;/div&gt; &lt;/div&gt; &lt;div v-else-if="
vue.js--条件语句 v-else-if
qq_57218752的博客
03-21 1261
条件语句 v-else-if 条件语句 v-else-if指令的作用与JavaScript中else if语句效果一样，应用指令可以进行更多的判断和输出不同的结果 下面从一道经典的题来看看如何使用： 将某学校的学生成绩转化为不同等级 优秀 大于等于90分 良好 大于等于75分 及格 大于等于60分 不及格 小于60分 在这里分成四个部分用传统的JavaScript的else if语句想想怎么写！在这里先思考一下 其实v-else-if语句和你所想的没有太大区别。 <!DOCTYPE html
v-if和v-else同时使用的注意事项
Wangyanan3351的博客
02-19 1111
v-if和v-for同时使用的注意事项 v-if和v-for同时使用，v-for的优先级要高于v-if，这意味着v-if将分别重复运行于每一个v-for中。 所以如果你的目的是有条件的跳过循环，那么可以将v-if置于外层元素或者上 ...
v-else-if使用方法
weixin_38724114的博客
09-07 9733
v-else-if 官网解释：充当v-if的“else-if 块”，可以连续使用 当v-if 、 v-else 两个指令无法满足多条件的业务需求，可以使用v-else-if 增加多种情况的判断 官网示例： <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C &l...
V-if V-else-if V-else 的用法
DSs1206的博客
07-28 1万+
1.v-if（如果） 如果条件成立则执行if内的代码 2.v-else-if（否则如果） 如果前面的if 如果先前的if不成立则判断v-else-if 如果v-else-if 成立 执行代码 不成立向下执行代码 3.v-else（否则） 如果前面的if和elseif不成立则执行else内的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT...
v-if和v-else和v-else-if的使用
weixin_43613849的博客
06-02 4288
1、v-if v-if的原理： v-if后面的条件为false时，对应的元素以及其子元素不会渲染。 也就是根本没有不会有对应的标签出现在DOM中。 <div id="app"> <h2 v-if="isShow"> <div>abc</div> <div>abc</div> <div>abc</div> <div>abc</div>
vue.js 使用v-if v-else发现没有执行解决办法
01-19
最近在学习Vue，因为刚开始学习，所以总会遇到这样那样的问题，今天要说的一个错误就是在看Vue的官方文档的时候，发现在使用v-if和v-else指令的时候，相应的内容都出现了 初始代码： <div v-if=Math.random> 0.5> ...
浅谈vue 锚点指令v-anchor的使用
12-13
如下所示： export default { ... if (binding.value == 0) { total = 0; } else { total = document.getElementById(`anchor-${binding.value}`).offsetTop; } let distance = document.documentEle
Vue.js常用指令汇总（v-if、v-for等）
01-19
v-if//v-show//v-else//v-for//v-bind//v-on 1. v-if 条件渲染指令，根据其后表达式的bool值进行判断是否渲染该元素； eg:  HTML: <p v-if=male>Male <p v-if=female>Female <p v-if=age>25>Age:{{age}} <p v...
Vue.js_20_v-if、v-else-if、v-else 指令
魏宇轩
04-27 336
本系列博客汇总在这里：Vue.js 汇总 v-if、v-else-if、v-else 指令一、简要说明二、v-if 的原理 源码工程文件为： 一、简要说明 v-if、v-else-if、v-else 这三个指令与 JavaScript 的条件语句 if、else、else if 类似。Vue 的条件指令可以根据表达式的值在 DOM 中渲染或销毁元素或组件。 简单的案例演示： 二、v-if ...
零基础学习Vue: 第5课 Vue指令v-if、v-else-if、v-else 的使用：
舜岳的博客
04-14 190
零基础学习Vue: 第5课 Vue指令v-if、v-else-if、v-else 的使用： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://c...
v-if,v-else-if,v-else与v-show
qq_38888512的博客
04-26 286
基本使用 v-if、v-else-if、v-else <template v-if = "false">雷天</template> //渲染 //和流程控制一样，只会进入第一个符合条件的渲染 <div v-if = "true">晴天</div> //渲染 <div v-else-if = "true">雨...
【Vue】零基础学习Vue: 第7课 Vue指令v-if、v-else-if、v-else 的使用：
06-28 222
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"&g...
【Vue】Vue中的条件渲染（v-if、v-else-if、v-else 以及 v-show）的使用（实例详解）
热门推荐
一只洒鹿
06-25 5万+
v-if v-else v-else-if v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回truth值的时候被渲染。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.js"></script> </head> &lt
Vue学习总结（九）——条件判断v-if、v-else-if、v-else、v-show指令
third_的博客
12-12 2263
入坑Vue.js（七）——网络封装
教程3 Vue3条件渲染指令（v-if、v-else、v-else-if、v-show、v-for）
boxuestudio的博客
02-21 9128
教程3 Vue3条件渲染指令（v-if、v-else、v-else-if、v-show、v-for）
Vue可以在v-else中在写v-if嘛
04-26
不可以。Vue中v-else必须与v-if一起使用，表示如果v-if的条件不满足，则执行v-else中的代码。如果想要在v-else中使用v-if，则需要将v-else与上一个v-if合并...例如：v-if="condition1" v-else-if="condition2" v-else。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值