[油猴脚本开发指南]条件判断
# 前文这节课我们学习条件判断
上来一串代码
```
let text=`<div id="app" style="position: absolute;top: 50vh;left: 50vw;background: #fb7d7d;padding:10px;">
<button@click='ModifyStatus'>Modify</button>
<span v-if='!controlshow'>我是谁？</span>
<span v-else>妙蛙种子！</span>
</div>`
var el=document.createElement('div')
el.innerHTML=text;
document.body.append(el)
const Counter = {
data() {
return {
controlshow: false,
}
},
methods:{
ModifyStatus(){
this.controlshow=!this.controlshow
},
}
}
const app = Vue.createApp(Counter);
app.mount("#app");
```
我们开始分析
```javascript
<button@click='ModifyStatus'>Modify</button>
<span v-if='!controlshow'>我是谁？</span>
<span v-else>妙蛙种子！</span>
```
这里点击按钮触发ModifyStatus函数
```javascript
ModifyStatus(){
this.controlshow=!this.controlshow
},
```
```javascript
<span v-if='!controlshow'>我是谁？</span>
<span v-else>妙蛙种子！</span>
```
这里判断状态，如果!controlshow为真的状态，则显示相应元素，如果为假，则显示v-else所在元素
因为!为取反运算符，所以controlshow为假时，则显示上半部分元素
与此相关的还有
v-else-if
因为与js语法基本相似，这里就不解释了。
页:
[1]