我正在测试 Bootstrap 5 alpha。他们从依赖项中删除了 jQuery，如果该框架用于基于 Vue 的应用程序的 UI，则这是一项改进。在 Bootstrap 4.5 中，我注意到如果所有 B/S 4 依赖项都正确包含在应用程序的 main.js 文件中，则切换开关不起作用。
由于使用了 Vanilla JavaScript，在 v5 中一切正常。我想问一下在我的 Vue 应用程序中单击时如何获得切换开关的状态。我想使用这个 Bootstrap 组件创建一些设置，但我不确定如何使用v-on:click.prevent事件绑定管理开/关状态。欢迎任何建议。
您可以使用v-model指令来创建双向数据绑定。
<div class='form-check form-switch'>
<input class='form-check-input' type='checkbox' id='flexSwitchCheckDefault' v-model='switch'>
<label class='form-check-label' for='flexSwitchCheckDefault'>Default switch checkbox input</label>
</div>
或用作组件，例如，switch-component。
<switch-component
id='switch'
v-model='switch'>
Default switch
</switch-component>
Vue.component('switch-component', {
props: ['id', 'value'],
inheritAttrs: false,
template: `
<div class='form-check form-switch'>
<input
class='form-check-input'
type='checkbox'
v-bind='$attrs'
:checked='value'
@change='$emit("input", $event.target.checked)'>
<label
class='form-check-label'
:for='id'>
<slot/>
</label>
</div>
`
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句