JS三元运算符如何执行多个语句
最编程
2024-01-17 16:34:39
...
<!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>
推荐阅读