我在用vuejs 样式绑定在计算样式时动态呈现更改。
这对于我的 Vue 实例范围内的所有内容都非常有效，但是我如何计算 body 或 html 标签的样式？
当您可以绑定 vue 实例时，这曾经是可能的，但 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本身，您需要使用纯 JavaScript 在watcher。下面是一个简单的例子。
You should（我没有尝试过，但我假设）能够通过使主体和外部容器不滚动来克服过度滚动效果。在里面放一个可滚动的容器。当它滚动时，它会显示你的外容器，对吗？
不具有约束力的原因body are here（适用于 React，但适用于 Vue）。
有什么问题吗？大家都来更新吧！有些人有
将模态附加到其上的非 [Vue] 代码。谷歌字体加载器将
愉快地将元素放入 body 中一小会儿，并且
如果你的应用程序尝试更新，它会严重且莫名其妙地崩溃
在那段时间里处于最高水平的东西。你真的知道什么吗
你所有的第三方脚本都在做什么？广告或社交媒体怎么样？
网络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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
