条件判断语法v-if、v-else-if、v-else

已于 2022-02-08 14:21:04 修改
阅读量388 收藏
点赞数
分类专栏： VUE 文章标签： vue.js 前端
于 2021-11-08 18:09:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46112274/article/details/121212776
版权

条件判断语法v-if、v-else-if、v-else

1、v-if的使用

<body>
<div id="app">
    <h2 v-if="isShow">
      <div>abd</div>
      <div>abd</div>
      <div>abd</div>
      <div>abd</div>
      {{message}}
    </h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message:'你好呀',
            isShow:true
        }
    })
</script>
</body>

2、v-if、v-else-if的使用

<div id="app">
    <h2 v-if="isShow">
      <div>abd</div>
      <div>abd</div>
      <div>abd</div>
      <div>abd</div>
      {{message}}
    </h2>
    <h2 v-else>isShow为false时显示我</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message:'你好呀',
            isShow:true
        }
    })
</script>
</body>

3、v-if、v-else-if、v-else的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
      <h2 v-if="score>90">优秀</h2>
      <h2 v-else-if="score>=70">良好</h2>
      <h2 v-else-if="score>=60">及格</h2>
      <h2 v-else>不及格</h2>

      <h1>{{result}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            score:99
        },
        computed: {
          result() {
            let showMessage = '';
            if(this.score >=90){
              showMessage = '优秀'
            }else if(this.score>=80){
              showMessage = '良好'
            }else if(this.socre>=60){
              showMessage = '及格'
            }else{
              showMessage  = '不及格'
            }
            return showMessage
          }
        }

    })
</script>

</body>
</html>

在这里插入图片描述

小码哥呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
语法分析-if-else的匹配问题
06-02
语法分析-if-else的匹配问题语法分析-if-else的匹配问题
图文讲解vue的v-if使用方法
12-29
vue提供了一个用于判断的v-if 、v-else语法，可以通过v-if和v-else进行内容的显示与隐藏。下面将通过使用v-if、v-else进行数据的显示与隐藏 1、新建一个html页面，然后创建一个div设置id为app，然后在这个div里面创建两个div，同时给这两个div设置不同的文本。 代码： <div id=app> <div>当flage为true时显示</div> <div>当flage为false时显示</div> </div>   2、引入vue.js。在body结束标签前面使用引入vue.js文件。 3、创建vue挂载点。在vue.js引入文件后面新建一个<s
Vue - v-if和v-else-if和v-else的使用
最新发布
2202_75871191的博客
03-11 1178
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优先级和使用事项。
IF-ELSE条件语句的翻译程序设计
06-20
通过设计、编制、调试一个条件语句的语法及语义分析程序，加深对语法及语义分析原理的理解，并实现词法分析程序对单词序列的词法检查和分析。 对条件语句： IF 〈布尔表达式〉 THEN 〈赋值语句〉 ELSE〈赋值语句〉 (1)按给定的题目写出符合语法分析方法要求的文法和属性文法描述。 (2)按给定的题目给出语法分析方法的思想及分析表设计。 (3)按给定的题目给出中间代码序列的结构设计。 (4)完成相应的词法分析、语法分析和语义分析程序设计。 (5)编制好分析程序后，设计若干用例，上机测试并通过所设计的分析程序。
if_else&case;语句分析.pdf
10-30
FPGA学习交流If..else语句特点：具有优先级。If不满足时，才执行else语句。 Case 语句特点：没有优先级。
vue.js 使用v-if v-else发现没有执行解决办法
01-19
使用v-if v-else发现没有执行 最近在学习Vue，因为刚开始学习，所以总会遇到这样那样的问题，今天要说的一个错误就是在看Vue的官方文档的时候，发现在使用v-if和v-else指令的时候，相应的内容都出现了 初始代码： <div v-if=Math.random> 0.5> Math.random > 0.5 </div> <div> Math.random <= 0.5 </div> 显示的结果： Math.random > 0.5 Math.random <= 0.5 后来发现，我的这个是忘记了创建实例，每一个Vue
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...
【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
教程3 Vue3条件渲染指令（v-if、v-else、v-else-if、v-show、v-for）
boxuestudio的博客
02-21 8772
教程3 Vue3条件渲染指令（v-if、v-else、v-else-if、v-show、v-for）
Vue源码阅读（18）：v-if、v-else、v-else-if 指令的源码解析
f18855666661的博客
08-21 3152
前面的 17 篇文章对 Vue 底层的核心运行机制进行了解析，接下来，开始对 Vue 中的众多特性进行针对化的讲解。 首先讲讲大家在工作中经常用到的 v-if、v-else、v-else-if 指令，这些指令是在模板编译阶段实现的。 1，v-if v-if 的用法如下所示： <template> <div id="app"> <h1 v-if="isShow">Hello Vue h1</h1> </div> </t
v-if和v-else和v-else-if的使用
weixin_43613849的博客
06-02 4227
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的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
12-09
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。 Vue.js提供了一些常用的内置指令，如下： v-if指令 v-for指令 v-show指令 v-else指令 v-bind指令 v-on指令 1：v-if指令 v-if指令是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下： v-if="expression" expression是一个返回布尔值的表达式，表达式可以是一个布尔值属性，也可以是一个返回布尔值的运算式。
详解Python if-elif-else知识点
09-20
本篇文章给大家总结了Python中if-elif-else的相关知识点以及语法相关内容，有兴趣的朋友参考学习下。
vue学习笔记
qq_36333315的博客
04-17 176
一 ： v-if作用 ： 判断是否加载固定的内容，如果为真，就加载，否则不加载用处 : 用在权限管理，页面加载语法 : v-if="判断表达式"特点 : 控制元素插入或删除，而不是隐藏（v-show是隐藏）v-if与v-show的区别 :v-if的安全级别更高，v-show只是隐藏了，通过页面源代码还是可以看到，安全级别低、v-if更高的切换消耗（切换消耗指从未加载到加载或者从加载到未加载的状况，...
vue 指令 之 v-if、v-else-if、v-else
笑望灬星辰
06-13 927
vue 指令 之 v-if、v-else-if、v-else <template> <div class="box"> <input type="text" v-model="test"> <!-- 第一个 v-else-if 必须要在v-if节点之后 第二个 v-else-if 紧跟其后 节点必须同级 angular 只要同级
v-if 和 v-else-if 和 v-else 的使用
零碎@流年絮语 的博客
01-23 849
v-if、v-else-if、v-else 这三个指令与JavaScript的条件语句if、else、else if类似。 Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件 v-if的原理 v-if后面的条件为false时，对应的元素以及其子元素不会渲染，也就是根本没有不会有对应的标签出现在DOM中。 v-if/v-else案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset
vue项目中v-if和v-else遇到的问题？
weixin_46409887的博客
11-04 6049
总结:居然还有这种bug，不知道还有没有人遇到过相同情况， 我来记录一下。 例子如图所示： 解决方法: v-if和v-else进行判断时：中间不能间隔div,可以把中间的内容放到上面的div里面 （v-if和v-else必须是相连的中间不能间隔） 希望可以帮助到小伙伴们。 ...
Vue指令篇_v-if、v-else、v-else-if
桃花扇的博客
07-21 1188
1.v-if 作用：条件性的渲染一块内容，这块内容只会在指令的表达式为真值时被渲染。 2.v-else 3.v-else-if
v-if v-else
05-30
`v-if` 和 `v-else` 是 Vue.js 中的条件渲染指令，用于根据某个表达式的值来决定是否渲染某个元素。如果表达式为真，那么渲染该元素；如果表达式为假，则不渲染该元素。 `v-else` 是 `v-if` 的扩展指令，它表示当 `v-if` 中的表达式为假时，才渲染该元素。`v-else` 必须紧跟在 `v-if` 或 `v-else-if` 后面，否则会出现语法错误。 示例： ```html <div v-if="isShow"> <!-- 如果 isShow 为真，则渲染该元素 --> <p>这是一个显示的元素</p> </div> <div v-else> <!-- 如果 isShow 为假，则渲染该元素 --> <p>这是一个隐藏的元素</p> </div> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值