v-show-slide是Vue.js指令,用于显示/隐藏具有可配置的上/下动画的元素。
# Yarn
$ yarn add v-show-slide
# NPM
$ npm install v-show-slide --save
1.导入并注册指令
import VShowSlide from 'v-show-slide'
Vue.use(VShowSlide)
2.使用指令。
<template>
<div id="app" class="app">
<ul id="features" v-show-slide="featuresOpen" class="features">
<li>内容 1</li>
<li>内容 2</li>
<li>内容 3</li>
</ul>
<button
@click="toggleFeatures"
class="toggle-features"
aria-controls="features"
:aria-expanded="featuresOpen ? 'true' : 'false'"
>
{{ featuresOpen ? '隐藏' : '显示' }}
</button>
</div>
</template>
export default {
name: 'App',
data() {
return {
featuresOpen: false,
}
},
methods: {
toggleFeatures() {
this.featuresOpen = !this.featuresOpen
},
},
}