[油猴脚本开发指南]v-show
# v-show我们可以看一下代码
```javascript
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无论是否真假都会渲染，所以初始化的成本更大。
在合适的时候选择合适的指令。
这和油猴也没啥关系啊？ 上vue啦哈哈哈哈 本帖最后由 涛之雨 于 2021-10-13 22:07 编辑
油猴配合vue的全局注入css简直就是灾难{:4_89:}
如果插入vue的话，
注入的vue默认的css需要局部生效，因此我选择shadowdom来隔离植入的部分。
但是字体需要全局生效。。。。
shadowdom中设置字体不知道为啥不生效，必须全局注入才行，不知道是不是我哪里没搞对。。。
主要就是那些iconfont。。。。没有iconfont的vue没有灵魂
涛之雨 发表于 2021-10-13 22:04
油猴配合vue的全局注入css简直就是灾难
如果插入vue的话，
注入的vue默认的css需要局部生效，因此 ...
其实我也不赞成在脚本中引入vue这类框架，除非页面中本来就有。shadowDOM的字体设置成根节点的内联样式就行了吧，注入css的话，加一个:host？反正我直接注入没碰到问题。 涛之雨 发表于 2021-10-13 22:04
油猴配合vue的全局注入css简直就是灾难
如果插入vue的话，
注入的vue默认的css需要局部生效，因此 ...
我用油猴+vue还比较少
还没碰到这个问题... cxxjackie 发表于 2021-10-14 00:18
其实我也不赞成在脚本中引入vue这类框架，除非页面中本来就有。shadowDOM的字体设置成根节点的内联样式就 ...
其实引入vue我是主要想是反复操作dom有点操作恶心了，引入vue感觉能舒服一点
占用确实很大，但是他舒服啊，呜呜呜呜
涛之雨 发表于 2021-10-13 22:04
油猴配合vue的全局注入css简直就是灾难
如果插入vue的话，
注入的vue默认的css需要局部生效，因此 ...
大佬有例子围观一下css的问题么
我目前还没碰到过这个问题...
我是vue+element，测试了几次好像都还可以
上次webpackjsonp的问题认真学完了！ 李恒道 发表于 2021-10-14 09:15
其实引入vue我是主要想是反复操作dom有点操作恶心了，引入vue感觉能舒服一点
占用确实很大，但是他舒服啊 ...
这个问题，可以自己写一个小型的框架来解决嘛，这些大型框架是针对大环境开发的，而油猴有自己特殊的环境（各类GM函数、unsafeWindow等等），直接套用多多少少会产生一些问题，我觉得更有价值的是研究这些框架是怎么实现的，然后尝试自己实现一些。 涛之雨 发表于 2021-10-13 22:04
油猴配合vue的全局注入css简直就是灾难
如果插入vue的话，
注入的vue默认的css需要局部生效，因此 ...
shadowdom 又学到了
页:
[1]
2