基于媒体查询的vue绑定值

您可以尝试绑定 陈列 组件特性的值:

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

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

...

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)
},

...

我自己也在努力寻找VUEJ的解决方案,如果有的话,那已经太复杂了。涉及到很多不必要的工作,在这些工作中可以整洁地用CSS完成。

这个解决方案是 styled components 或者事实上 CSS in JS 轻松处理此类事情的解决方案。

import styled from 'styled-components';
import breakpoint from '../utils/breakpoint.js';

const YourStyledComponent = styled.div`
    width: calc(100% - 30px);
    @media (min-width: ${breakpoint.SM}px) {
        // Your media styles
    }
`;

然后在Vue组件中,将其用作普通组件。你也可以传递道具。一定要多读一些- Vue-styled-components

这样做,你只是使用CSS的样式一切。考虑到性能,这是前端开发的必要条件。我认为我们已经有很长一段时间没有在与样式或处理布局相关的Javascript中添加eventListeners了。