javascript - 屏幕尺寸变化时如何更改 vue.js 数据值?

原文 标签 javascript vue.js skel

<div id="app">
    <ul>
        <!-- On mobile devices use short heading -->
        <template v-if="mobile == 1">
            <li><a href="#">Heading</a></li>
        </template>
        <!-- Else use long heading -->
        <template v-else-if="mobile == 0">
            <li><a href="#">Heading Long</a></li>
        </template>
    </ul>
</div>

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script>
    var app = new Vue({
            el: '#app',
            data: {
                mobile: 0
            }
});



当 (max-width: 547px) 的屏幕断点变为事件状态时,我正在寻找一种方法来更改 'mobile' 的值。并在此移动断点变为非事件状态(屏幕超过 547 像素)时将其更改回来。我通常使用 skel ( https://github.com/ajlkn/skel ) 来处理屏幕断点,但我无法从 Vue 内部访问 skel,反之亦然。我会放弃使用 Vue 来完成这个特定的任务,但是 display: none 和 display: block 会破坏我的演示文稿——将我的元素变成一个块。

最佳答案

如果您正在使用 Vuetify ,您可以根据内置 breakpoints 以编程方式调整数据值xs, sm, md, lg, xl(如 Material Design 中指定)如下:

computed: {
  mobile() {
    return this.$vuetify.breakpoint.sm
  },
}
mobile将更改为 true只要屏幕宽度小于 600px。
您的代码将是这样的(我还将 if 语句直接移到 <li> 元素上):
<div id="app">
    <ul>
        <!-- On mobile devices use short heading -->
        <li v-if="mobile"><a href="#">Heading</a></li>
        <!-- Else use long heading -->
        <li v-else><a href="#">Heading Long</a></li>
    </ul>
</div>

关于javascript - 屏幕尺寸变化时如何更改 vue.js 数据值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49414697/

相关文章:

javascript - ng-model从下拉列表中获取错误的值

javascript - imacros javascript条件评估语句

javascript - HTML 节点树中动态生成的元素存储在哪里?

javascript - Vue.js“发出事件”不会冒到父元素和祖 parent 元素

javascript - JS星级评分系统

node.js - 在单个路由/页面上多次调用服务器的 Nuxt/Vue 错误?

javascript - Vuetify.js 数据表固定标题通过 CSS 滚动

javascript - 使用Javascript加载CSS太慢

ruby-on-rails - Rails 像素化模板 (skel)