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

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

[复制链接]
  • TA的每日心情
    开心
    前天 00:00
  • 签到天数: 49 天

    [LV.5]常住居民I

    350

    主题

    3064

    帖子

    3077

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    3077

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯

    发表于 2021-10-12 19:13:30 | 显示全部楼层 | 阅读模式

    前文

    这节课我们学习条件判断

    上来一串代码

    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语法基本相似,这里就不解释了。

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。

    发表回复

    本版积分规则

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