<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) 的屏幕断点变为事件状态时更改“移动”的值。并在该移动断点变为非事件状态(屏幕超过 547 像素)时将其改回。我通常使用 skel ( https://github.com/ajlkn/skel ) 来处理屏幕断点,但我无法从 Vue 内部访问 skel,反之亦然。我会放弃使用 Vue 来完成这个特定任务,但是 display: none 和 display: block 会影响我的演示——将我的元素变成一个 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/