小编Ed *_*hee的帖子

如何使用 vue.js 计算 <body> 或 <html> 上的样式?

我正在使用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)

vue.js vuejs2

4
推荐指数
2
解决办法
8798
查看次数

标签 统计

vue.js ×1

vuejs2 ×1