基于媒体查询的vue绑定值 [英] vue binding value based on media query

问题描述

carousel-3d(:display="3", :width="150", :height="150")

我想基于媒体查询设置属性绑定

I want to set the attribute bindings based on a media query

例如

显示应变为5

推荐答案

您可以尝试将 display 值绑定到组件属性:

You could try binding the display value to a component property:

<carousel-3d :display="display">

...然后在窗口调整大小时更新该属性:

...and then update that property on window resize:

...

data() {
  return {
    display: 3
  }
},

methods: {
  onResize() {
    if (window.innerWidth > 960) {
      this.display = 5
    } else {
      this.display = 3
    }
  }
},

created() {
  window.addEventListener('resize', this.onResize)
},

beforeDestroy() {
  window.removeEventListener('resize', this.onResize)
},

...

这篇关于基于媒体查询的vue绑定值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！