javascript - 将内联样式不透明度值与观察者属性绑定(bind)

Question

我一直在尝试将 div 的不透明度与 slider 的值绑定(bind)。

<div class="container" v-bind:style="opacity">test content</div>

但是，我无法使绑定(bind)正常工作，并且在检查开发人员工具时看到的是 div 绑定(bind)到某个 [object object] 并且不是样式本身。

这是我的观察者的样子:

watch:{
opacity: function(oldMessage, newMessage) {
            console.log(this.opacity);
            return {
                '"style"':this.opacity
            }
        },
},...

我可以看到不透明度的值正确地出现在控制台上。值范围是 0-1，看起来像这样。

我不确定就内联绑定(bind)而言这里出了什么问题。任何帮助将不胜感激!

Answer 1

如果 opacity 是一个数字，你必须像这样使用它:

<div class="container" v-bind:style="{opacity: opacity}">test content</div>

在 {opacity: opacity} 中，第一个是 CSS 属性名称，第二个是 data vue 属性名称。

注意:您对观察者的使用:

watch:{
opacity: function(oldMessage, newMessage) {
            console.log(this.opacity);
            return {
                '"style"':this.opacity
            }
        },
},...

意义不大。观察者不返回值。您返回该对象根本没有用。也许你想要的是一个计算属性:

new Vue({
  el: '#app',
  data: {
    opacity: 0.5
  },
  computed: {
    containerStyle() {
      return {opacity: this.opacity}
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <input type="range" min="0" max="1" value="0.5" step="0.01" v-model="opacity"> {{ opacity }}
  <div class="container" v-bind:style="containerStyle">TEST CONTENT</div>
</div>