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

说明：

这是一个小demo，可以在网页上执行；
用了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>

JS三元运算符如何执行多条语句相关推荐

js各运算符的执行顺序
js各运算符的执行顺序 JavaScript运算符优先级 JavaScript 运算符优先级,是描述在计算机运算计算表达式时执行运算的先后顺序. 先执行具有较高优先级的运算,然后执行较低优先级的运算. ...
JS三元运算符语法错误记录
前言:本篇文章仅谈JS中的三元运算符,php,java等语法有不同. 今天写代码时三元运算符语法颠覆了我以往的认知!!! 我们都知道if-else与"?:"都是判断使用的语句,个人 ...
JS算术运算符、 JS赋值运算符、 JS自增自减、 JS比较运算符、 JS逻辑运算符、 JS三元运算符、 JS选择分支
文章目录 1.算术运算符常见的算术运算符: 2.赋值运算符例: 3.自增自减自增: 自身的值上+1 自减: 自身的值上-1 例: 4.比较运算符比较运算符:用于比较两个值的大小关系,返回值是一 ...
js三元运算符_这些优化技巧可以避免我们在 JS 中过多的使用 IF 语句
最近在重构代码时,我发现早期的代码使用太多的 if 语句,其程度是我从未见过的.这就是为什么我认为分享这些简单的技巧是非常重要的,这些技巧可以帮助我们避免过多的使用 if 语句. 接下来会介绍6种方式 ...
js三元运算符(? :)的链式写法
如果用三元运算符进行连续判断,之前习惯这么写: (typeof num === 'number') ? (num <= 0 ? 0 : (num < 10 ? ('0' + num) : ...
JS三元运算符（日志）
语法结构条件表达:式﹖表达式1 :表达式2: 执行思路: 如果条件表达式结果为真则返回表达式1 的值如果条件表达式结果为假则返回表达式2的值 eg: num = 10; result = num & ...
JS 三元运算符嵌套使用
表达式 (expr1) ? (expr2) : (expr3) 在 expr1 求值为 TRUE 时的值为 expr2,在 expr1 求值为 FALSE 时的值为 expr3. 三元表达式的嵌套使用 ...
Js 三元运算符三元表达式
<body><script>var a = 20;var b;if (a > 10) {b = 100;} else {b = 200;}alert("b=&q ...
js三元运算符的简写
基本形式 x ? x : y 简写形式 x ?: y 这种简写形式 a > b ?: b 等于 a > b ? a > b : b

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

JS三元运算符如何执行多条语句相关推荐

最新文章

热门文章