Vue v-model实现自定义多选单选

Vue.js 是一款流行的前端框架，它的核心特性之一是双向数据绑定，这在处理表单输入时非常方便。`v-model` 指令是 Vue 中用于实现这一功能的关键，它可以让视图层与数据模型之间保持同步。在本文中，我们将讨论如何在 Vue 中使用 `v-model` 实现自定义样式的多选和单选功能。 首先，`v-model` 在 Vue 中用于在组件和数据模型之间建立绑定。对于单选按钮（radio）和复选框（checkbox），`v-model` 的值会根据用户的选中状态进行更新。在单选按钮中，`v-model` 绑定的数据通常只有一个值，而复选框则可以绑定一个数组，包含所有选中的值。 在描述中提到的问题，开发者遇到的问题是 `v-model` 在微信小程序（mpvue）中未按预期工作。为了快速解决问题，开发者决定在原项目中创建一个测试页面，利用 Vue 的原生表单元素和 `v-model` 来实现类似的功能，而无需手动监听点击事件。 实现这个功能的关键步骤如下： 1. 使用 `v-for` 指令遍历数据源，生成多个选项。例如： ```html <ul class="qus-list"> <li v-for="(item, index) in state.ExamInfo.QuestionAnswerCode" :key="index" :class="{ 'li-focus': chooseNum === index }"> <!-- 其他内容 --> </li> </ul> ``` 2. 将选项分解为两部分：`<input type="radio/checkbox">` 和 `<label>`。`input` 用于数据绑定，`label` 用于样式展示和点击交互。`input` 使用 `v-model` 绑定数据，例如： ```html <input type="radio" :value="item.Code" :id="'choice' + index" v-model="selectedAnswer"> <label :for="'choice' + index">{{ item.Description }}</label> ``` 这里，`v-model="selectedAnswer"` 对应单选按钮的选中值，对于复选框，`v-model` 会是一个数组。 3. 使用 `v-bind:class` 指令根据当前选中状态添加或移除样式。例如，当用户选择某个选项时，对应的 `li` 元素可以添加一个 `li-focus` 类，来改变其样式。 4. 通过 Vue 的计算属性或方法来处理选中状态的逻辑，例如 `chooseNum` 变量，以确保 `v-bind:class` 的正确应用。 5. 通过监听 `@change` 事件，可以对用户的选择做出响应，如更新其他数据或执行某些操作。 Vue 的 `v-model` 提供了一种简洁的方式来处理表单数据，使得在构建自定义样式多选和单选功能时，我们可以专注于样式设计和逻辑处理，而无需关心底层的事件绑定和数据同步。这大大提高了开发效率，并让代码更加整洁。在遇到框架特定问题时，可以灵活地使用原生 HTML 表单元素作为替代方案，以达到相同的效果。