如何计算 <body> 上的样式或 <html>使用 vue.js? [英] How to compute styles on <body> or <html> using vue.js?
问题描述
我正在使用 vuejs 样式绑定 将更改动态呈现为计算样式.
这适用于我的 Vue 实例范围内的所有内容，但我如何计算 body 或 html 标签的样式?当您可以将 vue 实例绑定到但 vue 不再允许您这样做时，这曾经是可能的.
我想动态更新在 vue 中使用我的计算变量的背景颜色.
添加了用于演示的代码片段
var app = new Vue({el: '#app',数据: {颜色:'#666666'},计算:{背景颜色:函数(){返回 {'背景颜色':this.color}}},方法: {切换背景:函数(){if(this.color=='#666666'){this.color = '#BDBDBD'} 别的 {this.color = '#666666'}}}})<script src="https://vuejs.org/js/vue.min.js"></script><身体><div id="app" :style="backgroundColor"><div>很多内容...<按钮@click="toggleBackground">点击切换</button>
</html>
如果你真的需要设置 body 本身的样式，你需要在 watcher<中使用纯 JavaScript 来完成/代码>.下面是一个简单的例子.
您应该(不是我尝试过的，但我是假设)能够通过使主体和外部容器不滚动来克服过度滚动效果.在里面放一个可滚动的容器.当它过度滚动时，它会显示您的外部容器，对吗?
不绑定body的原因是此处(适用于 React，但适用于 Vue).
有什么问题?大家快来更新吧！有些人有将模态附加到它的非 [Vue] 代码.谷歌字体加载器将愉快地将元素放入 body 几分之一秒，然后如果它尝试更新，您的应用程序将可怕且莫名其妙地崩溃在那段时间里处于顶级水平的东西.你真的知道什么吗你所有的第三方脚本都在做什么?广告或社交怎么样网络 SDK?
new Vue({el: '#app',数据: {isRed: 假},手表: {isRed() {document.querySelector('body').style.backgroundColor = this.isRed ?'红色':空；}}});#app {背景颜色:白色；保证金:3rem；}<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script><div id="应用程序"><input type="checkbox" v-model="isRed">I am using vuejs style bindings to render changes dynamically as the styles are computed.
This works great for everything within the scope of my Vue instance but how can I compute styles for body or html tags? This used to be possible when you could bind the vue instance to but vue no longer lets you do it.
I want to dynamically update the background color of using my computed variables in vue.
edit: added code snippet to demonstrate
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>
If you really need to style body itself, you'll need to do it with plain JavaScript in a watcher. A simple example is below.
You should (not something I've tried, but I'm hypothesizing) be able to defeat overscrolling effects by making body and your outer container non-scrolling. Put a scrollable container inside that. When it overscrolls, it will show your outer container, right?
The reasons for not binding to body are here (for React, but applies to 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>
这篇关于如何计算 <body> 上的样式或 <html>使用 vue.js?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
