Vue.js 条件判断

最新推荐文章于 2023-06-02 18:37:52 发布
最新推荐文章于 2023-06-02 18:37:52 发布
阅读量608 收藏 1
点赞数 2
文章标签： vue.js 前端 javascript
mkbk
本文链接：https://blog.csdn.net/m0_68633696/article/details/126164828
版权

v-if

条件判断使用v-if指令：

v-if 指令
在元素 和 template 中使用 v-if 指令：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p v-if="seen">现在你看到我了</p>
            <template v-if="ok">
              <h1>玛卡巴卡</h1>
              <p>玛卡巴卡爱搬石头</p>
              <p>玛卡巴卡的石头屋</p>
            </template>
        </div>  
        <script>
        new Vue({
          el: '#app',
          data: {
            seen: true,
            ok: true
          }
        })
        </script>
    </body>
</html>

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

 在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{if}}

 v-else

可以用v-else指令给v-if添加一个“else”块：

v-else 指令
随机生成一个数字，判断是否大于0.5，然后输出对应信息：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div v-if="Math.random() > 0.5">
              Sorry
            </div>
            <div v-else>
              Not sorry
            </div>
        </div>
        <script>
        new Vue({
          el: '#app'
        })
        </script>
    </body>
</html>

 v-else-if

v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

v-else指令
判断type变量的值：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div v-if="type === 'A'">
                A
            </div>
            <div v-else-if="type === 'B'">
                B
            </div>
            <div v-else-if="type === 'C'">
                C
            </div>
            <div v-else>
                Not A/B/C
            </div>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    type: 'C'
                }
            })
        </script>
    </body>
</html>

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
余月初贰
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vuejs 条件判断
苦涩
08-30 311
v-if 使用 <div id='app'> <h2 v-if="true"> {{message}} <div>aaa</div> <div>bbb</div> </h2> </div> <script> const app = new Vue({ el: '#app', data: { message: 'hello', .
vue.js提交按钮时简单的if判断表达式示例
weixin_30838873的博客
08-07 533
简单的业务需求如下，看图说话 1：当充值金额没有填写的时候，会有Toast小弹框提示“请输入有效的充值金额” if (!this.money) { console.log('money',money); Toast({ ...
vue.js条件判断
零小唬的博客
12-06 272
vue.js条件判断
vue.js选择if（条件渲染）详解
weixin_33985507的博客
01-02 1018
vue.js选择if（条件渲染）详解 一、总结 一句话总结： v-if 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-if</title> 6 <link rel="st...
6、vue.js if判断 条件渲染
qq_19484091的博客
05-09 652
HTML 部分代码 <div id="div_id"> <!--直接在标签中，进行判断--> <div v-if="id == 1">ID等于1</div> <div v-else-if="id == 2">ID等于2</div> <div v-else>ID不等于1 并且 ID不等于2</div> <!--在 <template> 上使用--> <template v
Vue.js期末总复习
06-28
Vue.js提供了多种指令，例如v-if、v-else、v-show等，用于实现条件判断。v-bind指令用于绑定数据，但不能实现条件判断。 3. 下列代码的运行结果为10。 在Vue.js中，可以使用computed选项定义计算属性。计算属性...
学习vue.js条件渲染
12-29
本文实例为大家分享了vue.js中条件渲染的练习代码，供大家参考，具体内容如下 html: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>条件渲染</title> <...
Vue.js实现可排序的表格组件功能示例
10-17
Vue.js的条件渲染可以通过`v-if`或`v-show`指令实现，此处选择了在模板中进行条件判断。 7. **样式应用**： 通过在`th`元素上设置`class`，可以动态地改变元素的样式，如在升序或降序时高亮排序箭头。 8. **数据...
vue.js实现条件渲染的实例代码
10-19
Vue.js 是一款流行的前端JavaScript框架，它提供了丰富的功能来帮助开发者构建交互式的Web应用。在Vue.js中，条件渲染是一项核心特性，允许我们根据数据动态地显示或隐藏内容。本篇将详细介绍Vue.js中实现条件渲染的...
VueJS之条件判断
Galois的博客
07-19 990
布尔条件判断： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Gamacode.com</title> </head> <body> <div id="app"> &lt...
Vue.js 条件判断，循环遍历，key，虚拟DOM
qq_52499703的博客
08-02 598
Vue.js 条件判断，循环遍历，key，虚拟DOM
怎么给vue.js加判断
苹果咏的博客
08-05 1803
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
Vue.js 学习笔记五：条件判断
Stary 的 IT 之旅
04-15 139
目录 条件判断 v-if、v-else-if、v-else 用 key 管理可复用的元素 v-show 条件判断 v-if、v-else-if、v-else 使用见 Vue 基本使用 - 常用模板语法 - 指令操作。 用 key 管理可复用的元素 Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换： <div id="app"> &l.
Vue.js学习系列（六）---条件与循环
bwf_erg的博客
02-22 1241
在vuejs中同样可以进行条件判断和循环。 1.条件判断 vuejs通过“v-if”指令执行判断 v-if表示的是值为true则显示该标签，为false则不显示； 这段代码表示，如果abc这个对象存在的话，就显示这一行数据，它的值为abc.a。如果不存在的话，就不显示。显然在该代码中abc对象是存在的，且abc.a的值为1.所以最后在页面上显示的是1。 2.循环 vuejs中的
3.Vue.js前端框架：条件判断与列表渲染
小白_xm
04-13 4619
3.1 条件判断 在视图中，经常需要控制某些DOM元素的显示或隐藏。Vue.js提供了多个指令来实现条件的判断，包括 v-if、v-else、v-else-if、v-show指令。下面分别进行介绍。 3.1.1 v-if指令 v-if 指令可以根据表达式的值来判断是否输出DOM元素及其包含的子元素。如果表达式的值为 true，就输出DOM元素及其包含的子元素；否则，就将DOM元素及其包含的子元素移除。例如，输出数据对象中的属性 a 和 b 的值，并根据比较两个属性的值，判断是否输出比较结果。代码如下：
vue.js v-if使用，vue.js if...else if使用
蕃薯耀的博客
11-28 1553
&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;vue if else&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="vueDiv"&gt; &lt;div&gt; &lt;di
总结vue3 的一些知识点：​Vue.js 条件语句​
最新发布
2301_76147196的博客
06-02 1021
提供先进的推理，复杂的指令，更多的创造力。版本配置，双击左侧菜单项目打开xcodeproj。编辑版本或build第一次可以随意，但在提交版成功后，这两个必须有一个值是新的区别，否则提交上传肯定会被拒绝。我们可以在组件中添加方法，使用 methods 选项，该选项包含了所需方法的对象。
vue输出语句_Vue.js if 语句
weixin_42101237的博客
02-22 560
条件判断v-if条件判断使用 v-if 指令：v-if 指令在元素 和 template 中使用 v-if 指令：现在你看到我了阿西河前端教程一个助你成为全栈开发的网站哈哈哈，打字辛苦啊！！！new Vue({el: '#app',data: {seen: true,ok: true}})这里， v-if 指令将根据表达式 seen 的值 (true 或 false ) 来决定是否插入 p 元素。...
Vue.js之if分支和for循环
weixin_44827643的博客
07-11 690
本文主要介绍Vue.js中if分支以及for循环的使用。Vue.js提供了v-if、v-else-if以及v-else的分支语句，v-if可与v-else-if搭配使用。当判定结果符合条件时，相应的元素会被渲染出来，不符合条件的元素不会进行渲染。如下例所示。 score的值为98 渲染结果如下：注意：另外介绍v-show指令，实质上是display属性的封装，通过true或false的设置显示或隐藏元素。如下所示 完整代码如下：......
vue.js判断条件做为参数
05-18
可以将判断条件作为函数参数传递进去。例如： ```javascript function doSomething(condition) { if (condition) { // 如果条件为真，执行某些操作 } else { // 如果条件为假，执行另一些操作 } } // 调用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值