Vue Bootstrap 是一種基于 Vue.js 的開源框架,在 Bootstrap 樣式庫的基礎上實現了一系列 Vue.js 組件和指令,可以更輕松地進行 Web 應用開發,尤其是移動端開發。
Vue Bootstrap 提供了多種組件,包括按鈕、表單、模態框、導航欄等等。我們可以引入需要的組件,然后在應用中使用,輕松實現頁面的布局和功能。
<template> <b-form @submit="handleSubmit"> <b-form-group label="用戶名"> <b-form-input v-model="username"></b-form-input> </b-form-group> <b-form-group label="密碼"> <b-form-input v-model="password" type="password"></b-form-input> </b-form-group> <b-button type="submit">登錄</b-button> </b-form> </template> <script> import { BForm, BFormGroup, BFormInput, BButton } from 'bootstrap-vue'; export default { components: { BForm, BFormGroup, BFormInput, BButton }, data() { return { username: '', password: '' } }, methods: { handleSubmit() { console.log('提交登錄信息:', this.username, this.password); } } }; </script>
上面是使用 Vue Bootstrap 實現一個登錄表單的代碼示例。我們只需要引入需要的組件和指令,然后在模板中使用,就可以實現一個完整的表單界面。在代碼中可以看到,使用 Vue Bootstrap 提供的組件,可以輕松實現表單的輸入和提交,同時也可以對表單進行驗證。
上一篇python 輸入輸出