JS三元运算符如何执行多条语句

最新推荐文章于 2024-01-16 09:56:40 发布
最新推荐文章于 2024-01-16 09:56:40 发布
阅读量4.7k 收藏 9
点赞数 10
分类专栏： JavaScript 文章标签： vue javascript es6 vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46021847/article/details/106687123
版权

说明：

  1. 这是一个小demo，可以在网页上执行；
  2. 用了Vue，不习惯的朋友直接看isDisplay()中的方法就好了。
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p v-if="seen">现在你能看到我</p>
    <button v-on:click="isDisplay">{{btnValue}}</button>
</div>
<script>

    new Vue({
        el: '#app',
        data: {
            seen: true,
            btnValue: '隐藏'
        },
        methods: {
            isDisplay() {
                // 方法1（转换成if...else..）：
                // if (this.seen === true) {
                //     this.seen = false;
                //     this.btnValue = '显示'
                // } else {
                //     this.seen = true;
                //     this.btnValue = '隐藏'
                // }


                // 方法2（写多条三元运算符）：
                // this.seen === true ? this.seen = false : this.seen = true;
                // this.btnValue === '隐藏' ? this.btnValue = '显示' : this.btnValue = '隐藏'


                // 方法3（放在小括号中，用逗号隔开）：
                // this.seen === true
                //     ? (this.seen = false, this.btnValue = '显示')
                //     : (this.seen = true, this.btnValue = '隐藏')


                // 方法4（用ES6的箭头函数包裹，并自执行）：
                this.seen === true
                    ? (() => {
                        this.seen = false;
                        this.btnValue = '显示'
                    })()
                    : (() => {
                        this.seen = true;
                        this.btnValue = '隐藏'
                    })();
            }
        }
    })
</script>
</body>
</html>
猿林新秀
关注
  • 10
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
107条Javascript的常用语句
05-06
这107条JavaScript的常用语句涵盖了变量声明、数据类型、运算符、控制流、函数、对象、数组、字符串处理、事件处理、DOM操作等多个核心领域。以下是对这些知识点的详细阐述： 1. **变量声明**：JavaScript使用`var`...
15条JavaScript最佳实践小结
10-27
3. **使用简短的代码格式**：通过三元运算符简化条件判断，如`(condition) ? value_if_true : value_if_false`。利用逻辑或操作符`||`来初始化默认值，如`var x = v || 10`。 4. **对象字面量语法**：使用对象字面...
在JavaScript中使用三目运算符时进行多个操作
bafudanbi37558的博客
03-17 396
今天使用三目运算符时，刚好需要在false时进行两个操作，故测试并记录在三目运算符中使用多个操作的方式 例子如下： true ? (console.log(1),console.log(2), test()) : console.log(0); function test(){ console.log('test'); } 效果如下： 需要使用...
js三元表达式的结果中不能使用逗号运行多行代码，逗号后的代码不受表达式控制
weixin_45467142的博客
04-05 295
三元运算符执行多个表达式
memoryI的博客
10-12 6779
let time,activeTime,isTime time === 1 ? (activeTime = -1) && (isTime = false) : activeTime = '' 或者 time === 1 ? (activeTime = -1, isTime = false) : activeTime = '' ...
js三目运算执行多个操作
weixin_39457424的博客
04-24 2199
加上()，用’,'隔开 // eslint-disable-next-line no-unused-expressions params.row.dynamic === 1 ? (tagColor = 'success', tagText = '是') : (tagColor = 'error', tagText = '否')
js 三元运算符多语句写法
如果有了可惜
03-18 1441
只适合于简单的 if else 语句 if( a > 1 ) { console.log(1) }else { console.log(2) } a > 1 ? console.log(1) : console.log(2) null/undefinde 站位单分支 if( a > 1 ){ a++ } a>1 ? a++ : null/undefined ...
js-运算符-分支语句-三元表达式
m0_64492064的博客
04-06 391
js基础知识，本文讲解了运算符的使用和优先级，if语句和switch语句 还有三元表达式
浅谈javascript运算符——条件,逗号,赋值,()和void运算符_.docx
10-10
这使得在一条语句中执行多个操作成为可能，比如在变量声明和for循环中： ```javascript var i = 0, j = 1, k = 2; for (var i = 0, j = 10; i ; i++, j--) { console.log(i + j); } ``` 赋值运算符`=`用于将右侧的...
javascript文档
08-11
for...in 语句t 对应于对象或数组中的每个元素执行一个或多个语句。 fromCharCode 方法 返回 Unicode 字符值的字符串。 Function 对象 创建一个新的函数。 function 语句 声明一个新的函数。 getDate 方法 使用...
原生js实现回复评论功能
10-20
同时，使用了三元运算符进行条件判断，以保持代码简洁。通过逐行阅读和理解代码，我们可以更好地掌握原生JavaScript在构建动态交互功能方面的应用。 总之，实现原生JavaScript评论回复功能涉及DOM操作、事件监听、...
js“三元表达式” （三元运算符）
热门推荐
gogaogao的博客
12-14 5万+
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/liu_jiachen/article/details/73251172 前言 各位大神，大家好，相约周三。我们又见面了。 众所周知，三元表达式在代码量上比if…else语句更简洁一些。但是博主在可读性上更加偏向于if…else语句。三元表达式不仅在js中使用，在很多后台程序语言，比如java、php中都有使用，不过在js中对于三元表达式的要求貌似
JavaScript条件（三元）运算符的使用技巧
GoodIdea
07-17 572
为啥用三元运算符（ternary） condition ? expr1 : expr2 三元运算符用来简化条件判断 这个运算符可以用来代替if else条件判断。但是为什么有这个运算符呢？这里的原因是if else使用两个代码块，确只有一个会执行，在讲究的程序员看来是一种浪费。所以使用三元运算符用一条语句就可以完成功能就很有吸引力了。我们来看看下面的例子 var i=0; var f...
多个三元的嵌套
c_s_d_na的博客
03-26 2116
三元表达式的嵌套使用 在vue项目中,动态绑定class或style时,常常会用到三元表达式。 三元表达式的普通用法：a = 条件？值1：值2 三元表达式的嵌套用法：a = 条件1？值1 : (条件2？值2 : 条件3？值3：值4) 嵌套写法相当于： if (条件1) { a = 值1； }else if (条件2){ a = 值2； }else if (条件3){ a = 值3； }else { a = 值4； } 最近在一个vue项目中要实现这样的一个效果 ...
探索JavaScript中强大的三元运算符：简洁、灵活、提升代码效率
代码炼金术
01-16 4959
它可以简化代码并提高可读性，但在使用时要避免过度复杂的嵌套，以保持代码的清晰性。可读性和可维护性优先：如果代码的可读性和可维护性更为重要，尤其是在团队合作或长期维护的项目中，使用 if-else 语句可以使代码更清晰和易于理解。复杂的条件逻辑：如果条件逻辑非常复杂，包含多个条件分支和多个操作语句，使用 if-else 语句可以更清晰地表达代码逻辑，并使代码易于理解和维护。需要执行多个操作：如果根据条件需要执行多个操作语句，if-else 语句提供了更灵活的结构，可以在不同的条件分支中执行不同的代码块。
【JavaScript】三元运算要点整理
最新发布
weixin_48618536的博客
01-16 815
三元运算，又称为三目运算符，可根据不同的条件来执行不同的操作，相当于简单的if else 语句。需要注意的是，在编写过程中，不能出现等关键词，否则。本博文以3个示例对三元运算使用进行介绍，demo代码已经上传，可直接下载使用。
详解JS中三元运算符的语法和常见用法
qq_29701691的博客
10-18 5167
您提供一个要测试的条件，后跟一个问号，然后是两个用冒号分隔的表达式。在许多情况下，您可能正在处理可能有也可能没有定义值的变量——例如，从用户输入检索结果时，或从服务器检索数据时。尽管三元运算符是内联使用的，但可以将多个条件用作三元运算符表达式的一部分。通常，一个变量的值可能取决于另一个变量或条件的值。但是，在第二部分中，当应用相同的条件时，三元运算符中的条件将失败，因为。正如本教程中的示例所解释的，JavaScript 中的三元运算符有很多用例。例如，如果您想根据变量的值决定运行哪个函数，您可以使用以下。
三元表达式执行顺序 逻辑运算符的运用
weixin_30507269的博客
05-02 802
@Test public void fun2(){ Studuent s=null; String age=s==null?"0":s.getAge(); System.out.println(age); } 三元表达式执行的顺序：先比较左边获得布尔值，根据布尔值选择执行语句。如上s.getAge()会等待布尔值为false时才执行，不会出现空指针报错； @Test ...
JS三元运算和多条件运算
时清云的博客
08-24 2197
我们的代码在部署在线上之前，都要进行打包，打包之后的代码都是一段压缩之后的代码。可能有人会问了，这跟这篇文章的主题有什么关系呢？先别急，我们先看一下打包之后，开头的这段代码： !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof
javascript 三元运算符
11-24
JavaScript中的三元运算符是一种简单的条件语句，它可以根据条件的真假来返回两个不同的值。它的语法如下： ```javascript condition ? value1 : value2 ``` 如果条件为真，则返回value1，否则返回value2。下面是一个简单的例子： ```javascript var age = 20; var status = (age >= 18) ? "成年人" : "未成年人"; console.log(status); // 输出：成年人 ``` 在这个例子中，如果age大于或等于18，则status变量将被赋值为“成年人”，否则它将被赋值为“未成年人”。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值