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

我想根据媒体查询设置属性绑定

例如

display should become 5 when screen width > 960px

推荐答案

可以try 将display值绑定到组件属性:

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

...

Vue.js相关问答推荐

用于循环数组的模板元素内的条件渲染

VueI18n 无法读取或更改组合 API 中的区域设置

Vuetify 3 改变 Select 的 colored颜色

我需要在 nuxt2 上使用 /index 作为 url 的一部分

在 Vuejs 中更新 Chartjs 图表数据集

有没有办法将react 键作为值传递给由 v-for 创建的 v-model

v-slot: activator 中 {attrs} 参数的作用是什么?

如何在 A-La-Carte 系统中使用 vuetify 加载程序时导入 vuetify/lib

Vue cli 3项目,图像路径中的动态src不起作用

在textbox文本框 VueJS 2 中键入时搜索列表

更新 v-for 中使用的数组内的对象时,Vue js react性问题

使用 vue-test-utils 配置过滤器

Vue路由安全

Vue devServer 代理没有帮助,我仍然收到 CORS 错误

如何从 v-for 创建的对象中绑定多个类?

VueJS错误编译模板

样式化 Vue 插槽

更改时(change)调用函数

使用 puppeteer 生成 PDF 而不保存

在 Vuejs 中全局导入 Axios 方法