Javascript 使用watcher属性绑定内联样式不透明度值

我一直在尝试用

滑块的值绑定
div
的不透明度

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

我可以看到控制台上的不透明度值是正确的。值的范围为0-1，如下所示。

我不确定这里在内联绑定方面出了什么问题。任何帮助都将不胜感激
 如果
opacity
是一个数字，则必须像以下那样使用它：

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

没什么意义。观察者不会返回值。返回该对象毫无用处。也许您想要的是一个计算属性：


newvue({
el:“#应用程序”，
数据：{
不透明度：0.5
},
计算：{
集装箱运输方式（）{
返回{opacity:this.opacity}
}
}
})

{{opacity}}
测试内容
您知道我们需要的不仅仅是这些。不透明度属性包含什么？一个字符串、一个整型、一个浮点、一个对象、一个数组等等@RandyCasburn添加了更多关于值的外观。请更新问题标题好吗？说它与Vue框架相连。我不熟悉Vue，在检查google之前，我在想什么是新的JS maddnes观察者。但是谢谢，我学到了一些新东西。因此，如果我在html中使用
{opacity:opacity}
，并从vue中的computed属性返回
this.opacity
，根据您的注释的第一部分，这将是正确的方法？如果您使用
v-bind:style=“{opacity:opacity}”
则不需要计算属性。它将自动拾取。我只是添加了计算示例，因为它看起来像是您正在尝试做的事情。
<div class="container" v-bind:style="{opacity: opacity}">test content</div>

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