折腾：
【未解决】vuejs的vue-admin-template中用底图加叠加图片等元素实现控制面板图
期间，想办法，如何把此处的图片的css中的visibility的值，变成变量控制:
vuejs class value
vuejs class based on value
结果：
【已解决】vuejs中给css中绑定属性变量报错：Unexpected v-bind before :
再去优化为
<img :style="{'visibility':isNxmleVisible}" class="switch_NXMLE"然后再去：
【已解决】vuejs加上属性变量值
【总结】
最后用代码：
<img class="switch_NXMLE" :style="{'visibility': nxmleVisibility }" src="../../assets/control_room/switch_circle_closed.png" width="46" height="28">
data: () => {
return {
isNxmleVisible: false,
...
}
},
computed: {
nxmleVisibility: {
// getter
get: function() {
const nxmleVisibleValue = this.isNxmleVisible ? 'visible' : 'hidden'
console.log('nxmleVisibleValue=%s', nxmleVisibleValue)
return nxmleVisibleValue
}
// // setter
// set: function(newValue) {
// console.log('nxmleVisibility: newValue=%s', newValue)
// this.nxmleVisibility = newValue
// }
},即可用变量nxmleVisibility控制css属性值，即visibility是hidden还是visible了。
转载请注明：在路上 » 【已解决】vuejs中如何用变量控制css属性的值