vue优雅的实现媒体查询
时间: 2023-11-27 16:38:56 浏览: 21
可以使用Vue的计算属性和动态绑定来实现媒体查询。首先,你可以在Vue实例中定义一个计算属性来根据屏幕宽度的不同返回不同的样式对象。然后,你可以使用v-bind指令将该计算属性绑定到需要响应式样式的元素上。
以下是一个示例代码:
```
<template>
<div :style="mediaStyle">
<!-- 内容 -->
</div>
</template>
<script>
export default {
data() {
return {
screenWidth: window.innerWidth
};
},
computed: {
mediaStyle() {
if (this.screenWidth >= 1024) {
return {
// 大屏幕样式
};
} else if (this.screenWidth >= 768) {
return {
// 中等屏幕样式
};
} else {
return {
// 小屏幕样式
};
}
}
},
mounted() {
window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
},
methods: {
handleResize() {
this.screenWidth = window.innerWidth;
}
}
};
</script>
```
这个示例代码中,我们使用计算属性`mediaStyle`来根据`screenWidth`的值返回不同的样式对象。在`mounted`钩子中,我们添加了一个窗口调整大小的事件监听器,当窗口大小改变时,调用`handleResize`方法更新`screenWidth`的值。