最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】vuejs加上属性变量值

变量 crifan 279浏览 0评论
折腾:
【未解决】vuejs中如何用变量控制css属性的值
期间,继续给vuejs加上的变量值isNxmleVisible
试了代码:
<img :style="{'visibility':nxmleVisibility}" class="switch_NXMLE"

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  nxmleVisibility: 'hidden',
  timer: '',
结果:
不起效果
NXMLE还是没有visibility属性为hidden
export default {
  name: 'Dashboard',
  nxmleVisibility: 'hidden',
  timer: '',
  computed: {
    ...mapGetters([
      'name',
      'nxmleVisibility'
    ])
  },
结果:不行。
【已解决】vuejs中加上data中的变量但报错:data property in component must be a function
然后就可以:让图片隐藏了:
再去扩展和优化之前写法
Class 与 Style 绑定 — Vue.js
还支持classObject即object对象变量
也支持计算出来的函数
所以去优化为:
<img class="switch_NXMLE" :style="{'visibility': isNxmleVisibie ? 'visible':'hidden'}"

  data: () => {
    return {
      isNxmleVisibie: fales
      // nxmleVisibility: 'hidden'
    }
  },
结果:是可以的
改为true:
isNxmleVisibie: true
即可显示:
然后去把三元计算符,换成函数试试
<img class="switch_NXMLE" :style="{'visibility': visibleValue }"

  data: () => {
    return {
      // isNxmleVisibie: true
      isNxmleVisibie: false
      // nxmleVisibility: 'hidden'
    }
  },

  computed: {
    ...mapGetters([
      'name'
    ]),

    visibleValue: (isVisible) => {
      console.log('isVisible=%o', isVisible)
      const curVisibleValue = isVisible ? 'visible' : 'hidden'
      console.log(`${isVisible} -> ${curVisibleValue}`)
      return curVisibleValue
    }
  },
结果:
调试发现:
index.vue?c189:39 isVisible=VueComponent {_uid: 55, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
09:08:44.808 index.vue?c189:41 [object Object] -> visible
输入的不是我们希望的bool的值
而去改为:
visibleValue(isNxmleVisibie)
会报错
index.vue?c189:39 isVisible=VueComponent {_uid: 55, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
09:08:44.808 index.vue?c189:41 [object Object] -> visible
看来 computed value,不支持传入参数
突然想起来,可以借用公共函数,加上特定变量的写法
但是出现问题:
【已解决】vuejs中computed中调用methods函数报错:TypeError Cannot read property visibleValue of undefined
然后继续:
【已解决】vuejs中想办法把公共函数提取出来
最后就可以了。然后再去:
【总结】
最后就加上变量了:
export default {
  name: 'Dashboard',
  timer: '',


  data: () => {
    return {
      isNxmleVisible: false,
      isN5Visibile: false,
      isGroundRt18Visibile: false
    }
  },

  computed: {

    nxmleVisibility: {
      // getter
      get: function() {
        const nxmleVisibleValue = visibleValue(this.isNxmleVisible)
        console.log('nxmleVisibleValue=%s', nxmleVisibleValue)
        return nxmleVisibleValue
      }
    },
即data返回要是个函数,其中有我们要的变量值
然后其他地方再去引用操作变量,即可。

转载请注明:在路上 » 【已解决】vuejs加上属性变量值

发表我的评论
取消评论

表情

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

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