vue如何实现checkbox回显效果

最新推荐文章于 2026-05-23 10:24:53 发布

原创最新推荐文章于 2026-05-23 10:24:53 发布 · 1.3w 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue.js

当前文章被收录于：

vue.js

3 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种使用Vue.js实现多选框选中值回显的方法。通过给每个选项绑定v-model来记录选中状态，当再次打开选择框时能够保留之前的选中状态。

当我选中多选框，点击确定后，再打开弹框，如何让之前选中的值回显到页面上。

2. 给遍历的元素双向绑定 v-model="businessregion.checked"

 <template v-if="businessregionList.length > 0">
                <template v-for="businessregion in businessregionList">
                  <dd>
                    <input type="checkbox"  name="businessregion" class="businessregion" :data-id="businessregion.businessregionCode" v-model="businessregion.checked"/>
                    <label for="city4">{{businessregion.businessregionName}}</label>
                  </dd>
                </template>
              </template>

3.就很容易的实现多选框回显了