【已解决】vuejs中如何用变量控制css属性的值

折腾：

【未解决】vuejs的vue-admin-template中用底图加叠加图片等元素实现控制面板图

期间，想办法，如何把此处的图片的css中的visibility的值，变成变量控制:

vuejs class value

vuejs class based on value

Class 与 Style 绑定 — Vue.js

javascript – Vue.js: Conditional class style binding – Stack Overflow

javascript – How to add a class conditionally in Vue? – Stack Overflow

vue.js – vuejs conditional binding a class based on the data – Stack Overflow

vue.js – Dynamic class name – Stack Overflow

vue.js – Conditionally adding a CSS class in Vue – Stack Overflow

结果：

【已解决】vuejs中给css中绑定属性变量报错：Unexpected v-bind before :

vue component – Vue.JS v-bind:style syntax not working? – Stack Overflow

再去优化为

 <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属性的值

【已解决】vuejs中如何用变量控制css属性的值

与本文相关的文章

Hi，您需要填写昵称和邮箱！