在变量或数据属性跟踪窗口大小的情况下,是否可以使用react 式窗口宽度

例如

computed:{
    smallScreen(){
        if(window.innerWidth < 720){
            this.$set(this.screen_size, "width", window.innerWidth)
            return true
        }
    return false
}

推荐答案

我不认为有办法做到这一点,除非你在windows 上安装一个监听器.

试试这样:

<template>
    <p>Resize me! Current width is: {{ windowWidth }}</p>
</template

<script>
    export default {
        data() {
            return {
                windowWidth: window.innerWidth
            }
        },
        mounted() {
            window.onresize = () => {
                this.windowWidth = window.innerWidth
            }
        }
    }
</script>

希望有帮助!

Vue.js相关问答推荐

当props 的值改变时如何更新类'

为什么在Vue.js中修改非react 性似乎是react 性的?

Vuetify 2中自定义标头的排序和筛选

我可以手动访问 vue-router 解析器吗?

Vuetify/Vue3 插槽模板之间的阴影

Vuetify 3 改变 Select 的 colored颜色

如何防止Nuxt3重新加载时滚动跳到网页顶部

Nuxt3-Vue中的useRoute和useRouter有什么区别

判断 vue-router.beforeEach 不限制对路由的访问

为什么Vue.js 使用单字标签

Vue 3 - 带有全局组件的无法解析组件

Vuetify - 如何在 v-data-table 中单击时突出显示行

Vue Prop 没有初始化器,也没有在构造函数中明确赋值

Vue 如何使用 slot 和 slot-props 测试组件

Jest错误找不到模块....

为什么 Vue.js 使用 VDOM?

动态更改我的 Vue.js SPA 主题的最佳方式?

如何让 vuetify 数据表在卡片内时跨越容器的整个宽度?

如何在 Vue.js 插槽范围内传递方法

如何在 Vuetify DataTable 组件中设置初始每页行数值?