gpt4 book ai didi

vue.js - 如何使用 vue.js 计算 或 的样式?

转载 作者:行者123 更新时间:2023-12-03 06:38:30 26 4
gpt4 key购买 nike

我正在使用 vuejs style bindings在计算样式时动态呈现更改。

这适用于我的 Vue 实例范围内的所有内容,但我如何计算 body 或 html 标签的样式?
当您可以将 vue 实例绑定(bind)到但 vue 不再允许您这样做时,这曾经是可能的。

我想动态更新在 vue 中使用我的计算变量的背景颜色。

编辑:添加代码片段来演示

var app = new Vue({
el: '#app',
data: {
color: '#666666'
},
computed: {
backgroundColor: function() {
return {
'background-color': this.color
}
}
},
methods: {
toggleBackground: function() {
if(this.color=='#666666'){
this.color = '#BDBDBD'
} else {
this.color = '#666666'
}
}
}
})
<script src="https://vuejs.org/js/vue.min.js"></script>
<html>
<body>
<div id="app" :style="backgroundColor">
<div>
lots of content...
</div>
<button @click="toggleBackground"> Click to toggle </button>
</div>
</body>
</html>

最佳答案

如果你真的需要样式body本身,您需要在 watcher 中使用纯 JavaScript 来完成。 .下面是一个简单的例子。

您应该(不是我尝试过的,但我假设)能够通过使 body 和您的外部容器不滚动来克服过度滚动效果。在里面放一个可滚动的容器。当它过度滚动时,它会显示你的外部容器,对吧?

不绑定(bind)body的原因是 here (适用于 React,但适用于 Vue)。

What’s the problem with ? Everybody updates it! Some people have non-[Vue] code that attaches modals to it. Google Font Loader will happily put elements into body for a fraction of second, and your app will break horribly and inexplicably if it tries to update something on the top level during that time. Do you really know what all your third party scripts are doing? What about ads or that social network SDK?



new Vue({
el: '#app',
data: {
isRed: false
},
watch: {
isRed() {
document.querySelector('body').style.backgroundColor = this.isRed ? 'red' : null;
}
}
});
#app {
background-color: white;
margin: 3rem;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<input type="checkbox" v-model="isRed">
</div>

关于vue.js - 如何使用 vue.js 计算 <body> 或 <html> 的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48172814/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com