小编Wil*_*ore的帖子

<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 会破坏我的演示文稿——将我的元素变成一个块。