时间戳

首页 > 解决方案 > Bootstrap-Vue 开关样式复选框：不显示自定义控件切换

javascript - Bootstrap-Vue 开关样式复选框：不显示自定义控件切换

问题描述

我正在阅读此处有关开关样式复选框的文档：https ://bootstrap-vue.org/docs/components/form-checkbox

当我在自己的应用程序中使用示例 HTML/JS 时，我可以获得要呈现的 html，但它不显示实际的开关切换，如下所示：

https://jsfiddle.net/Lz5tcpqb/2/

<template>
  <div>
    <b-form-checkbox v-model="checked" name="check-button" switch>
      Switch Checkbox <b>(Checked: {{ checked }})</b>
    </b-form-checkbox>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checked: false
      }
    }
  }
</script>

我在这里缺少什么吗？

标签： javascriptcheckboxbootstrap-vue

解决方案

它有点工作，您可能需要导入 css 或使用最新稳定版本的 bootstrap-vue 和 Vue.js

new Vue({
  el: '#app',
  data() {
    return {
      checked: false,
    };
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.16.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://unpkg.com/bootstrap-vue@2.16.0/dist/bootstrap-vue.js"></script>
<div id="app">
  <b-form-checkbox v-model="checked" name="check-button" switch>
    Switch Checkbox <b>(Checked: {{ checked }})</b>
  </b-form-checkbox>
</div>

推荐阅读