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

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

[复制链接]

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

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

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无论是否真假都会渲染,所以初始化的成本更大。

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

混的人。

81

主题

827

帖子

676

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
676

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

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

使用道具 举报

7

主题

66

帖子

29

积分

新手上路

Rank: 1

积分
29

三好学生中秋纪念章国庆纪念章

发表于 5 天前 | 显示全部楼层
上vue啦哈哈哈哈
回复

使用道具 举报

3

主题

42

帖子

91

积分

注册会员

Rank: 2

积分
91
发表于 4 天前 | 显示全部楼层
本帖最后由 涛之雨 于 2021-10-13 22:07 编辑

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

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

使用道具 举报

8

主题

124

帖子

162

积分

注册会员

Rank: 2

积分
162

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

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

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

使用道具 举报

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

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

我用油猴+vue还比较少
还没碰到这个问题...
混的人。
回复

使用道具 举报

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

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

其实引入vue我是主要想是反复操作dom有点操作恶心了,引入vue感觉能舒服一点
占用确实很大,但是他舒服啊,呜呜呜呜
混的人。
回复

使用道具 举报

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

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

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

上次webpackjsonp的问题认真学完了!
混的人。
回复

使用道具 举报

8

主题

124

帖子

162

积分

注册会员

Rank: 2

积分
162

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

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

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

使用道具 举报

81

主题

827

帖子

676

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
676

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

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

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

使用道具 举报

发表回复

本版积分规则

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