在vue中条件渲染指令_屏幕上条件渲染元素的Vue指令小于断点

在vue中条件渲染指令

不可见 (vue-not-visible)

Vue directive for conditional rendering (like v-if) element on screen smaller than breakpoints.

屏幕上小于断点的条件渲染(如v-if)元素的Vue指令。

View demo 查看演示 Download Source 下载源

安装 (Install)

$ npm install --save vue-not-visible

$ yarn add vue-not-visible

默认情况下使用 (Use default)

import Vue from 'vue'
import vueNotVisible from 'vue-not-visible'

/* const BREAKPOINTS = {
    mobile: 425,
    tablet: 768,
    tablet_landscape: 1024,
    desktop: 1200,
    desktop_large: 1440,
    hd: 1920,
}
*/
Vue.use(vueNotVisible) // this is default

<template>
  <div id="test">
        {{ message }} {{ count }}
        <div v-not-visible="'tablet'"> 
            <div v-on:click="count = count + 1">Not visible on table(screen < 768)</div>
        </div>
        <div v-not-visible="'mobile'">
            <div v-on:click="count = count + 1">Not visible on mobile(screen < 425)</div>
        </div>
    </div>
</template>

使用自定义断点 (Use custom breakpoints)

import Vue from 'vue'
import vueNotVisible from 'vue-not-visible'

Vue.use(vueNotVisible, {ipad: 1280}) // this is custom

<template>
  <div id="test">
        {{ message }} {{ count }}
        <div v-not-visible="'ipad'"> 
            <div v-on:click="count = count + 1">Not visible on ipad(screen < 1280)</div>
        </div>
    </div>
</template>

翻译自: https://vuejsexamples.com/vue-directive-for-conditional-rendering-element-on-screen-smaller-than-breakpoints/

在vue中条件渲染指令