首页 > 编程知识 正文

js三元运算符语法格式,js的三元运算符

时间:2023-05-03 05:17:07 阅读:268893 作者:710

说明:

这是一个小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>

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。