Vue2.0与Element：动态控制input禁用示例

"这篇文章主要展示了如何在Vue 2.0中结合Element UI库来实现一个功能，即通过选择下拉框（select）的选项来动态控制输入框（input）的禁用状态。当用户选择了一个select选项后，对应的input会被设置为禁用，无法编辑。" 在Vue 2.0中，我们可以利用数据绑定（v-bind）和事件监听（@）来实现这种交互。Element UI 是一套基于 Vue.js 的高质量组件库，提供了丰富的表单组件，如 `el-form`、`el-form-item`、`el-input` 和 `el-select`，这些组件可以帮助我们快速构建用户界面。 首先，我们需要在HTML中引入Vue和Element UI的CDN链接。然后创建一个Vue实例，定义一个名为 `formInline` 的数据对象，包含 `user` 和 `region` 属性，以及一个 `disabledInput` 属性来控制input的禁用状态。例如： ```html <div id="app"> <el-form inline="true" :model="formInline" class="demo-form-inline"> <el-form-item label="审批人"> <el-input v-bind:disabled="disabledInput" v-model="formInline.user" placeholder="审批人"></el-input> </el-form-item> <el-form-item label="活动区域"> <el-select v-model="formInline.region" @change="inputToDisabled" placeholder="活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> </el-form> </div> ``` 在上面的代码中，`v-model` 用于双向绑定数据，`v-bind:disabled` 使用 `disabledInput` 来控制input的禁用状态，`@change` 事件监听select的改变，触发 `inputToDisabled` 方法。 接下来，在Vue实例的`methods`对象中，我们需要定义 `inputToDisabled` 函数，该函数会在select的值发生变化时被调用，将 `disabledInput` 设置为 `true`，使input变为禁用： ```javascript new Vue({ el: '#app', data() { return { formInline: { user: '', region: '', }, disabledInput: false, }; }, methods: { inputToDisabled() { this.disabledInput = true; }, }, }); ``` 在这个例子中，当用户从下拉框中选择一个值时，`inputToDisabled` 方法会被触发，将 `disabledInput` 设置为 `true`，从而使得与之关联的input字段变禁用。如果希望在用户再次更改select时，input能恢复编辑状态，可以对 `inputToDisabled` 方法进行适当的修改，例如添加逻辑来处理这种情况。 这个实例展示了Vue的响应式特性以及Element UI组件的强大功能，通过简单的数据绑定和事件处理，我们可以实现复杂的表单交互。在实际开发中，这样的功能可以被应用于各种场景，比如根据用户的选择来决定是否允许输入某些信息，增加了用户体验的灵活性。