最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

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

JS crifan 456浏览 0评论
折腾:
【未解决】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属性的值

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
88 queries in 0.107 seconds, using 20.62MB memory