我正在测试 Bootstrap 5 alpha。他们从依赖项中删除了 jQuery,如果该框架用于基于 Vue 的应用程序的 UI,那么这是一个改进。在 Bootstrap 4.5 中,我注意到如果所有 B/S 4 依赖项都正确包含在应用程序的 main.js 文件中,切换开关将不起作用。
由于使用了 Vanilla JavaScript,v5 中一切正常。我想问一下在我的 Vue 应用程序中单击时如何获取切换开关的状态。我想使用此 Bootstrap 组件创建一些设置,但我不确定如何使用 v-on:click.prevent
事件绑定(bind)来管理开/关状态。欢迎任何建议。
最佳答案
您可以使用v-model
指令创建双向数据绑定(bind)。
<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>
`
})
关于javascript - 如何在vue应用程序中获取切换开关状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62698972/