BootstrapVue lh的示例
时间: 2024-06-16 16:02:56 浏览: 16
BootstrapVue是一个基于Bootstrap框架的Vue.js组件库,它提供了一套丰富的UI组件,可以帮助开发者快速构建响应式的Web应用程序。下面是一个关于BootstrapVue的示例:
```html
<template>
<div>
<b-button @click="showModal">打开模态框</b-button>
<b-modal v-model="showModalFlag" title="示例模态框">
<p>这是一个示例模态框。</p>
<b-button @click="closeModal">关闭</b-button>
</b-modal>
</div>
</template>
<script>
import { BButton, BModal } from 'bootstrap-vue';
export default {
components: {
BButton,
BModal,
},
data() {
return {
showModalFlag: false,
};
},
methods: {
showModal() {
this.showModalFlag = true;
},
closeModal() {
this.showModalFlag = false;
},
},
};
</script>
```
上面的示例展示了如何使用BootstrapVue的`BButton`和`BModal`组件来创建一个按钮和一个模态框。当点击按钮时,模态框会弹出显示一段文本,并提供一个关闭按钮。