如何在vue应用程序中切换开关状态
提问于 2020-07-02 14:43:34
我正在测试Bootstrap 5 alpha。他们从依赖项中删除了jQuery，如果框架用于基于Vue的应用程序的UI，这是一个改进。在Bootstrap4.5中，我注意到如果所有B/S4依赖项都正确地包含在应用程序的main.js文件中，则切换开关将无法工作。
在v5中，由于使用了普通的JavaScript，所以一切正常。我想问一下，在我的Vue应用程序中单击时，如何获取切换开关的状态。我想使用这个Bootstrap组件创建一些设置，但是我不确定如何使用v-on:click.prevent事件绑定来管理开/关状态。任何建议都将受到欢迎。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-07-03 00:11:16
您可以使用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>
`
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62698972
复制相关文章
点击加载更多
腾讯云开发者
