将内联样式不透明度值与观察者属性绑定

Question

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

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

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

这是我的观察者的样子：

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

我可以看到不透明度的值正确地进入控制台。值范围从0到1，看起来像这样。

我不确定在内联绑定方面出了什么问题。任何帮助将不胜感激！

Answer 1

如果peinfo,sample,287da2f0-61f0-11e7-89ae-000c2936efb4,NotSend,,2017-07-06 02:09:35.745+0000,{'NotSend'},0x1f8b080000096e8800ffa4586f73d33e12fe2a19bfba9b819c6c59b6c5bb9216a603fd734d809bfbc17864699d086ccb232ba13d86ef7e2bbba569089ccde545eb3fcfb3fb6877bdd6fa5b60b5dce41b100a6cf062f62d901b905fba6d8d27599424619666f4d92cd8896a0b5d6ec557bcf117cf5292b267b3f0d92c618c26f8cf1f129e651e1de2ad248a38671e93fabb491c87bc27304ea2a8277f42bbdd46442c419b01c94070224998aa8c11051945d74009489a15124d33a0715a1694a88ca452b10292a4104a71c9532ee3e051652b6c07ca0bfd16ecc076da347812138a5e03a76b846c0700ea09747fc0be3f9beda3c9213479c41e408f1a660f684ec7c0d31ff04321bf95cde34968f2fdd3777f52b71bd16d7cd455c14320f88b4afc6554c80218e12a8b32c29350f4511dace7ba29cd7d507d9c3dfde3c75bc167175a5ad399d2cd16c6b6c60a87f0f9eca4aa6656af37ae9b59e8c0ee40cdbdbd2f70e7b96f612daa8569ef7a4c302ce4c1705338ef6e0eb7b047396f1cd8465497a28603029b47739a72320f334a667febec8ed0bc6bc3dcba7a4e18a151fc3c8ce3f4ef7be65ee90adedf87eea9b5a32bda632e4cdd8ae6ee888e1f4c1f1a987dd08d325fbbe1e4aa056fa959cf96779d837acfe0b5356a2bddff5ad8cf8ce3fa578beb7f9c5fcf2ec1bdd4a69b9d63286d7db808bffc53e8a4d5adfbd9c4f10c5c61b23466c0739b5eeca7a1a08c75dd501ce5b6916ea8c620cf3b705886def906acf5965455f95b75b793d6cdfd59eff8094d37da61aaebb1f87c0dae1628ccaebbd11cef049add58bc845bedc682ff255b8731c2358c654cb12ed4e76de7f252e9b1ea85337a24748290ced946b67723d135d4b5d9c158dbadd58d2b47a2f5001f1bc0af16533f12bc9ba624cfdb3c2f6ba3c6daef09d2d49328f858e5a26d7377d78e26c1ad84d6e51bd1a80a2c1d5df7934a539ac6595395ed48c20dac1795e9e00dec97d1c9e9fb93eb731afd9283adb441cad9edc914d63fb760efdefb0e3785f81adc626b2d340e7bae846ebfc3bc39bbb93c7bfb2be60a5b183625075389e8727845acf0457ed2f96eeb8fa6f09f4a3e577fc05d6d2c6e0c2750df354371a9b3bed4f0ea4f3df0f706fa045d83ed5f578d8485d93653f8cb0aa01d8d7e6ba4a8709762e434ca2b0be35371b1ad9c7e79e760653e68058b8d18bf9c07c2cafcb0323e14e0feef74bcea770d17583f620d27532a68a5e5973e79a34937ae7ad768894d70e9b0dfae57e6a4e9f470bc67a4717870dcc2a5eb3bc93830baf3699ceac3ab6ca5e8e040eb15d413cd9cdde2e643817a8b7b16f01bdb35d853bdd36ae4022edd29ecb48473b3185aae6f1263a91f847698dc250aaee0aaf80cd28d167e8edba6896b7d8cf2ca3c09dce8c4622372307e85f7d9fd035fc87cfdeefcf495355313eae3f2070eb17256c63fe42fb765b9ff8cbd5b9eddfcea61199a0252a7901a6736d51ef6c3f26af1e65760635518926c2c5c1be9aacec82fe0c6522e37d827fa89ae1412fce4e3833e14f5ebadde7febe87653b5a2d583a14f7b33e94ef8cf167ff94b2d3c0cb571c109843c85b2a409291989250d2510092025670c421a6711ef3f19f493b213751bf8af1f9b2dbe76f2fd6b4144087b4ee8f388ad087941e98b88fefb9018e22fc568113feb070a8aed7a98854efde152affb12599e2e3df1427c36f6fd930f0dd746fb38accc8df87a2a9cf070729b867df82f747388f77b01c4619d1dfac79bbdcf93b51fe2fce4df6d8b7e93f8c247281fb4e1659cc8f195120c831eaec3cd5b55044f6cf735fc2402b38708040f7eae71ae3b6664f018e1e152ff07aecafb55f94f4503d13f649e58101ed184c7711c4ac5e294ab42c5691a252c8e92388d8674a3f20efacab91f32c1b7bcd68fa4c93c8a319724cb520c0125dee73d36ef275474327770eb3e6efd778efdbffdc70d6d7127ad94f5dbb33eece1fe9d0ed5e3e58c2699b77b7f969218cf6ac53ca34c4ac58bb42c3957095194f222e44a315c4686733b1d2aff51304ef229635112f130612ce3d951c50a033656717c44711cb37dc92c8c1e15f3822682c5a22c64c2b3509669c9221a9510c95286941f2aa6731a71c6d3087f614623961e536c3b2bc72a2e8f28c6fae5c9a3e230c4fc3f6a0e0549b348489e1211ab52821045c430e7519626112bb04ebeff170000ffff010000ffff96302a6dce140000,1,NotSend,81dbe6ba82bb0311aa0b311bae06781302345cd6e07d5bdd3d7eae08a37bb8a0,{'NotSend'},{'NotSend'},,NotSend,['NotImplemented'],NotImplemented,NotImplemented 是一个数字，则必须使用它：

opacity

在<div class="container" v-bind:style="{opacity: opacity}">test content</div> 中，第一个是CSS属性名称，第二个是{opacity: opacity} vue属性名称。

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

data

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

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}
    }
  }
})