我正在使用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自己的样式，你需要在watcher. 下面是一个简单的例子。
您应该（不是我尝试过的，但我假设）能够通过使主体和外部容器不滚动来克服过度滚动效果。在里面放一个可滚动的容器。当它过度滚动时，它会显示您的外部容器，对吗？
不绑定的原因body在这里（对于React，但适用于Vue）。
有什么问题？大家快来更新吧！有些人使用非 [Vue] 代码将模态附加到它上面。Google Font Loader 会很高兴地将元素放入 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>我想我找到了比使用jQuery/querySelector更好的解决方案
您可以直接在 Vue 模板中添加标签样式。并在此添加 v-if，就像这样：
<style v-if="true">
body {
background: green;
}
</style>
因此，您可以在此 v-if 中使用计算/方法，并且 DOM 始终会在您需要时更新。
希望这会帮助某人;)
UPD： 在模板中使用标签“样式”不是最好的主意，但您可以创建 v 样式组件，然后一切都会好起来的： 在 vuejs 模板中使用样式标签并从数据模型更新
我的片段：
<style v-if="true">
body {
background: green;
}
</style>
Vue.component('v-style', {
render: function (createElement) {
return createElement('style', this.$slots.default)
}
});
new Vue({
el: '#app',
data: {
isRed: false,
color: 'yellow',
},
});| 归档时间： |
|
| 查看次数： |
8798 次 |
| 最近记录： |