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

[油猴脚本开发指南]v-show

[复制链接]
  • TA的每日心情
    开心
    2 小时前
  • 签到天数: 56 天

    [LV.5]常住居民I

    352

    主题

    3110

    帖子

    3115

    积分

    管理员

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

    Rank: 10Rank: 10Rank: 10

    积分
    3115

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

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

    v-show

    我们可以看一下代码

    let text=`<div id="app" style="position: absolute;top: 50vh;left: 50vw;background: #fb7d7d;padding:10px;">
              <button  @click='ModifyStatus'>Modify</button>
              <span v-show='!controlshow'>我是谁?</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");

    这里我们使用了v-show

    注意

    v-show没有v-else

    v-show与v-if的区别

    v-if为一旦显示为真则开始渲染,而v-show使用的是display:none;

    在频繁切换的时候v-if的消耗更大

    而在初始化的时候,如果v-if为假则不会渲染,而v-show无论是否真假都会渲染,所以初始化的成本更大。

    在合适的时候选择合适的指令。

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    慵懒
    8 小时前
  • 签到天数: 69 天

    [LV.6]常住居民II

    152

    主题

    2019

    帖子

    2149

    积分

    管理员

    Rank: 10Rank: 10Rank: 10

    积分
    2149

    猫咪币纪念章热心会员活跃会员突出贡献三好学生中秋纪念章国庆纪念章管理员家财万贯

    发表于 2021-10-12 20:29:59 | 显示全部楼层
    这和油猴也没啥关系啊?
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

  • TA的每日心情
    郁闷
    2022-7-25 15:21
  • 签到天数: 10 天

    [LV.3]偶尔看看II

    12

    主题

    208

    帖子

    153

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    153

    三好学生中秋纪念章国庆纪念章活跃会员荣誉开发者

    发表于 2021-10-12 21:29:23 | 显示全部楼层
    上vue啦哈哈哈哈
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2022-7-26 08:35
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    9

    主题

    107

    帖子

    238

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    238

    猫咪币纪念章活跃会员热心会员突出贡献三好学生国庆纪念章中秋纪念章荣誉开发者

    发表于 2021-10-13 22:04:25 | 显示全部楼层
    本帖最后由 涛之雨 于 2021-10-13 22:07 编辑

    油猴配合vue的全局注入css简直就是灾难
    如果插入vue的话,
    注入的vue默认的css需要局部生效,因此我选择shadowdom来隔离植入的部分。
    但是字体需要全局生效。。。。

    shadowdom中设置字体不知道为啥不生效,必须全局注入才行,不知道是不是我哪里没搞对。。。
    主要就是那些iconfont。。。。没有iconfont的vue没有灵魂
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    13

    主题

    414

    帖子

    722

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    722

    活跃会员热心会员突出贡献三好学生猫咪币纪念章中秋纪念章国庆纪念章荣誉开发者

    发表于 2021-10-14 00:18:43 | 显示全部楼层
    涛之雨 发表于 2021-10-13 22:04
    油猴配合vue的全局注入css简直就是灾难
    如果插入vue的话,
    注入的vue默认的css需要局部生效,因此 ...

    其实我也不赞成在脚本中引入vue这类框架,除非页面中本来就有。shadowDOM的字体设置成根节点的内联样式就行了吧,注入css的话,加一个:host?反正我直接注入没碰到问题。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2 小时前
  • 签到天数: 56 天

    [LV.5]常住居民I

    352

    主题

    3110

    帖子

    3115

    积分

    管理员

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

    Rank: 10Rank: 10Rank: 10

    积分
    3115

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

    发表于 2021-10-14 09:14:07 | 显示全部楼层
    涛之雨 发表于 2021-10-13 22:04
    油猴配合vue的全局注入css简直就是灾难
    如果插入vue的话,
    注入的vue默认的css需要局部生效,因此 ...

    我用油猴+vue还比较少
    还没碰到这个问题...
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2 小时前
  • 签到天数: 56 天

    [LV.5]常住居民I

    352

    主题

    3110

    帖子

    3115

    积分

    管理员

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

    Rank: 10Rank: 10Rank: 10

    积分
    3115

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

    发表于 2021-10-14 09:15:50 | 显示全部楼层
    cxxjackie 发表于 2021-10-14 00:18
    其实我也不赞成在脚本中引入vue这类框架,除非页面中本来就有。shadowDOM的字体设置成根节点的内联样式就 ...

    其实引入vue我是主要想是反复操作dom有点操作恶心了,引入vue感觉能舒服一点
    占用确实很大,但是他舒服啊,呜呜呜呜
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2 小时前
  • 签到天数: 56 天

    [LV.5]常住居民I

    352

    主题

    3110

    帖子

    3115

    积分

    管理员

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

    Rank: 10Rank: 10Rank: 10

    积分
    3115

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

    发表于 2021-10-14 09:22:30 | 显示全部楼层
    涛之雨 发表于 2021-10-13 22:04
    油猴配合vue的全局注入css简直就是灾难
    如果插入vue的话,
    注入的vue默认的css需要局部生效,因此 ...

    大佬有例子围观一下css的问题么
    我目前还没碰到过这个问题...
    我是vue+element,测试了几次好像都还可以

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

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    13

    主题

    414

    帖子

    722

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    722

    活跃会员热心会员突出贡献三好学生猫咪币纪念章中秋纪念章国庆纪念章荣誉开发者

    发表于 2021-10-14 09:30:05 | 显示全部楼层
    李恒道 发表于 2021-10-14 09:15
    其实引入vue我是主要想是反复操作dom有点操作恶心了,引入vue感觉能舒服一点
    占用确实很大,但是他舒服啊 ...

    这个问题,可以自己写一个小型的框架来解决嘛,这些大型框架是针对大环境开发的,而油猴有自己特殊的环境(各类GM函数、unsafeWindow等等),直接套用多多少少会产生一些问题,我觉得更有价值的是研究这些框架是怎么实现的,然后尝试自己实现一些。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    8 小时前
  • 签到天数: 69 天

    [LV.6]常住居民II

    152

    主题

    2019

    帖子

    2149

    积分

    管理员

    Rank: 10Rank: 10Rank: 10

    积分
    2149

    猫咪币纪念章热心会员活跃会员突出贡献三好学生中秋纪念章国庆纪念章管理员家财万贯

    发表于 2021-10-14 09:32:09 | 显示全部楼层
    涛之雨 发表于 2021-10-13 22:04
    油猴配合vue的全局注入css简直就是灾难
    如果插入vue的话,
    注入的vue默认的css需要局部生效,因此 ...

    shadowdom 又学到了
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

    发表回复

    本版积分规则

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