上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

[油猴脚本开发指南]条件判断

[复制链接]

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
618
发表于 5 天前 | 显示全部楼层 | 阅读模式

前文

这节课我们学习条件判断

上来一串代码

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");

我们开始分析

          <button  @click='ModifyStatus'>Modify</button>
          <span v-if='!controlshow'>我是谁?</span>
                    <span v-else>妙蛙种子!</span>

这里点击按钮触发ModifyStatus函数

        ModifyStatus(){
            this.controlshow=!this.controlshow
        },
          <span v-if='!controlshow'>我是谁?</span>
                    <span v-else>妙蛙种子!</span>

这里判断状态,如果!controlshow为真的状态,则显示相应元素,如果为假,则显示v-else所在元素

因为!为取反运算符,所以controlshow为假时,则显示上半部分元素

与此相关的还有

v-else-if

因为与js语法基本相似,这里就不解释了。

混的人。

发表回复

本版积分规则

快速回复 返回顶部 返回列表