7 

<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 を使用するとプレゼンテーションが中断され、要素がブロックに変わります。

4

3 に答える 3

2

このライブラリを確認してください: 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>

または単にmedia queries（https://www.w3schools.com/css/css3_mediaqueries_ex.asp）に行く

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;
    }
}

もちろん、どのブレークポイントで何を表示し、何を非表示にするかを決定するのはあなた次第です。これがお役に立てば幸いです。

于 2018-03-21T19:19:34.347 に答える