说明：
这是一个小demo，可以在网页上执行；用了Vue，不习惯的朋友直接看isDisplay()中的方法就好了。 <!DOCTYPE html><html lang=”en” xmlns:v-on=”http://www.w3.org/1999/xhtml”><head> <meta vps云服务器 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> 86247503
