[英]How to change vue.js data value when screen size changes?
<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
}
});
I'm looking for a way to change the value of 'mobile' when the screen breakpoint of (max-width: 547px) becomes active.当 (max-width: 547px) 的屏幕断点变为活动时,我正在寻找一种方法来更改 'mobile' 的值。 And to change it back when this mobile breakpoint becomes inactive (screen goes over 547px).
并在此移动断点变为非活动状态(屏幕超过 547 像素)时将其更改回来。 I normally use skel ( https://github.com/ajlkn/skel ) to deal with screen breakpoints, but I cannot access skel from inside Vue, or vice-versa.
我通常使用 skel ( https://github.com/ajlkn/skel ) 来处理屏幕断点,但我无法从 Vue 内部访问 skel,反之亦然。 I would forego using Vue for this particular task, but display: none, and display: block throws off my presentation--turning my element into a block.
我会放弃使用 Vue 来完成这个特定的任务,但是 display: none 和 display: block 会破坏我的演示文稿——将我的元素变成一个块。
If you are using Vuetify , you can programmatically adjust the data value based on the built in breakpoints
of xs, sm, md, lg, xl (as specified in Material Design ) as follows:如果您正在使用Vuetify ,您可以根据 xs、sm、md、lg、xl(在Material Design 中指定)的内置
breakpoints
以编程方式调整数据值,如下所示:
computed: {
mobile() {
return this.$vuetify.breakpoint.sm
},
}
mobile
will change to true
as soon as the screen width is less than 600px.当屏幕宽度小于 600px 时,
mobile
将变为true
。
Your code would then be something like this (I also moved the if
statement to be directly on the <li>
element):您的代码将是这样的(我还将
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>
You can use onorientationchange event like the following:您可以使用如下所示的 onorientationchange事件:
methods: {
detectOrientationChange() {
switch(window.orientation) {
case -90 || 90:
// landscape
this.mobile = false;
break;
default:
// portrait
this.mobile = true;
break;
}
}
},
mounted() {
this.$nextTick(() => {
window.addEventListener('onorientationchange', this.detectOrientationChange)
}
},
created() {
this.detectOrientationChange(); // when instance is created
}
Note : As the event has been deprecated, it can only be used with mobile browsers as of writing this.注意:由于该事件已被弃用,因此在撰写本文时它只能与移动浏览器一起使用。
To detect screen orientation on current browsers check this post .要检测当前浏览器的屏幕方向, 请查看这篇文章。
Check this library : https://github.com/apertureless/vue-breakpoints检查这个库: https : //github.com/apertureless/vue-breakpoints
<div id="app">
<ul>
<!-- On mobile devices use short heading -->
<hide-at breakpoint="medium">
<template v-if="mobile == 1">
<li><a href="#">Heading</a></li>
</template>
</hide-at>
<!-- Else use long heading -->
<show-at breakpoint="mediumAndAbove">
<template v-else-if="mobile == 0">
<li><a href="#">Heading Long</a></li>
</template>
</show-at>
</ul>
</div>
or simply go with media queries
( https://www.w3schools.com/css/css3_mediaqueries_ex.asp )或者干脆使用
media queries
( https://www.w3schools.com/css/css3_mediaqueries_ex.asp )
CSS : CSS :
@media screen and (max-width: 600px) {
#app ul il:first-of-type {
visibility: visible;
}
#app ul il:last-of-type {
visibility: hidden;
}
}
@media screen and (max-width: 992px) {
#app ul il:first-of-type {
visibility: hidden;
}
#app ul il:last-of-type {
visibility: visible;
}
}
ofcourse it's up to you to decide what to show and what to hide on what breakpoint , i hope this helps.当然,由您决定在什么断点上显示什么以及隐藏什么,我希望这会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.