我正在使用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'
}
}
}
})Run Code Online (Sandbox Code Playgroud)
<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> …Run Code Online (Sandbox Code Playgroud)