Vue之条件语句(if-else-if)

最新推荐文章于 2024-05-01 01:10:18 发布
最新推荐文章于 2024-05-01 01:10:18 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： vue学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyupupup/article/details/103512680
版权

主要组合有

  1. v-if="a>90"  
  2. v-if="a>90"   v-else
  3. v-if="a>90"   v-else-if="a>60  v-else
<!DOCTYPE html>
<html>
	<head>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<div id="div">
			<button @click="gaoqi">随机按钮</button>
				<div v-if="a>90">土豪</div>
				<div v-else-if="a>60">有点小钱</div>
				<div v-else>穷鬼</div>
		</div>
	</body>
</html>
<script type="text/javascript">
			new Vue({
				el:'#div',
				data:{
					a:0
				},
				methods:{
					gaoqi: function(){
						this.a = Math.random()*100;
						// alert(this.a)
					}
				}
			})
</script>

 

zyupupup
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue条件循环判断+计算属性+绑定样式v-bind的实例
10-18
首先，我们来看条件判断，这包括`v-if`、`v-else-if`、`v-else`和`v-show`。 1. `v-if`指令用于在满足特定条件时才渲染元素。例如，在示例中，当`seen`为`true`时，`<p>`标签将显示文本“现在你看到我了”。`v-if`...
VUE学习05--VUE流程控制语句（ if / else if / v-show 条件判断 , for 循环 , for + if 使用）
stalin_的博客
06-17 1585
对于每一门语言，流程控制语句都十分的重要，有了它们我们才能实现更加复杂的需求，实现更加强大的功能。在VUE中对应也有一些特有的标签。下面我们来了解一下~ 一、条件判断标签： v-if --对应if v-else --对应else v-else-if --对应else if v-show -- ...
Vue - v-if和v-else-if和v-else的使用
2202_75871191的博客
03-11 2492
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优先级和使用事项。
【Vue】Vue的v-if、v-if-else、v-else-if、v-show的使用_vue 表格中用if else if
最新发布
2401_84412357的博客
05-01 735
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】高级前端工程师必备资料包。
vue if else 用法
m0_37180900的博客
12-28 1万+
<span style="color: red"> <h2 v-if="score >= 90 && score <= 100">优秀</h2> <h2 v-else-if="score >= 80 && score < 90">良好</h2> <h2 v-else-if="score >= 60 && score < 80"&gt...
【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-for直接循环数字实例
10-16
`v-if` 和 `v-else` 语句用于条件渲染。如果 `index` 小于 `hotelInfo.level`，则显示亮星图标（`#ht-icon-xingxing`），否则显示灰色星图标（`#ht-icon-xingxing1`）。这样，我们就创建了一个动态的星级展示，根据...
vue-router路由简单案例介绍
12-02
在 `app.vue` 的 `<script>` 部分，我们看到使用了 ES6 模块系统，`import` 语句用于引入外部组件（如 `Footers`）和 Vue Router。`export default` 用于导出 Vue 实例，这里包含了组件配置。 ```javascript import...
Vue.js常用指令汇总（v-if、v-for等）
10-21
3. **v-else** - 与`v-if`或`v-show`配合使用，当条件不满足时显示对应的元素。 ```html <div v-if="condition"> <!-- 如果condition为真，这里显示 --> <div v-else> <!-- 如果condition为假，这里显示 --> ```...
vue.js提交按钮时进行简单的if判断表达式详解
10-18
在提交按钮的点击事件处理函数中，可以编写if条件判断语句进行验证。 以下是一个示例代码片段： ```html <mt-field label="充值金额" id="money" placeholder="请输入" v-model="money" type="number"></mt-...
Vue源码阅读（18）：v-if、v-else、v-else-if 指令的源码解析
f18855666661的博客
08-21 6308
前面的 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
【Vue】Vue的v-if、v-if-else、v-else-if、v-show的使用
森姐姐的博客
09-29 1056
Vue的v-if、v-if-else、v-else-if、v-show的使用
Vue内置指令——v-if、v-else-if、v-else
沐小侠
06-29 7205
v-if 指令用于条件性地渲染一块内容，Vue会根据表达式的值的真假条件来渲染元素。 v-else是搭配 v-if 使用，v-else元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。类似 JS 的 if … else。 v-else-if充当v-if的else-if块，可以链式的使用多次。 类似JS的 if … else if … else。.........
Vue流程判断if|else
u010312671的专栏
06-09 3705
前言 使用vue在页面做对数据做逻辑判断，最常见的if,if-else,else操作的流程分支语句 <Col span="6" v-for="(dd,index) in data" :key="index" style="margin:0px 20px 20px"> <Card :bordered="false"> <p>课程名称：{{dd.courseName}}</p>
vue基础---条件渲染
weixin_30672019的博客
03-22 431
（1）v-if条件渲染 v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 可以用v-else添加一个“else 块”： ①表达式 <div id="area1"> <p v-if="1>2">{{message1}}</p> ...
Vue模板语法（二）
凉茶铺的博客
01-17 2058
介绍了vue条件语句、v-show、template元素、v-show和v-for模板语法的使用方法，对其用法进行了说明。
VueJS条件语句：v-if、v-else、v-else-if
cxu123321的博客
08-14 219
VueJS条件语句：v-if、v-else、v-else-if HTML:if-else <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></s.
vue基础（语法糖，条件渲染）
star_run的博客
04-17 843
vue.js源代码 大量采用匿名函数 形如(function(){}) () 1. 特点 安全性高 减少了函数命名冲突 第二个括号才是函数的真正运行， 里面可以传入实际参数 第一个括号确定了匿名函数的作用范围， 语法不会报错， 里面放一个没有名字的函数， 函数可以接收形式参数 2. 底层代码封装 匿名函数作用 确定vue.js这个库的使用方法 a. 直接将Vue当做全局的一个方法...
能用vue的if-else语句写出来吗
03-22
当然可以，以下是使用 Vue 的 if-else 语句的示例代码： <p v-if="isShow">这是显示的内容 <p v-else>这是隐藏的内容 export default { data() { return { isShow: true } } } 在上面的代码中，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值