input v-model

v-model 是 Vue.js 框架中的一个指令，用于实现双向数据绑定。通过 v-model，我们可以将表单控件的值与 Vue 实例的数据属性进行绑定，实现数据的双向同步。

例如，我们可以在一个输入框中使用 v-model 指令来绑定一个 Vue 实例中的数据属性，如下所示：

<input v-model="message" type="text">

上述代码中，`message` 是 Vue 实例中的一个数据属性，它表示输入框中的文本内容。通过 v-model 指令，输入框的值和 `message` 数据属性会自动进行双向绑定，任一方的改变都会影响另一方。

在 Vue 实例中，我们可以通过 `this.message` 来访问和修改 `message` 数据属性的值。例如，我们可以在 Vue 实例的方法中使用 `this.message` 来获取输入框中的值或者修改它。

new Vue({
  data: {
    message: ''
  },
  methods: {
    showMessage: function() {
      alert(this.message);
    }
  }
});

上述代码中，`showMessage` 方法会弹出一个对话框，显示当前输入框中的文本内容。

这就是 v-model 指令的基本用法和作用。它简化了表单控件和数据属性之间的双向绑定操作，提高了开发效率。

相关问题

el-input v-model

el-input 是一种基于 Element UI 的输入框组件，v-model 是 Vue.js 的一个指令，用于双向绑定数据。在 el-input 中使用 v-model 可以实现输入框与数据的双向绑定，即数据的改变会反映在输入框中，输入框中的内容也会影响数据的值。例如，使用 v-model="inputValue" 可以将输入框中的值绑定到名为 inputValue 的数据上，同时也可以通过改变 inputValue 的值来修改输入框中的内容。

<el-form :model="form"> <el-form-item label="主机" :label-width="'120px'"> <el-input v-model="form.host" type="input" placeholder="请输入IP"></el-input> </el-form-item> <el-form-item label="端口" :label-width="'120px'"> <el-input v-model="form.port" type="input" placeholder="请输入端口"></el-input> </el-form-item> <el-form-item label="用户" :label-width="'120px'"> <el-input v-model="form.user" type="input" placeholder="请输入用户名"></el-input> </el-form-item> <el-form-item label="密码" :label-width="'120px'"> <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input> </el-form-item> </el-form>

这段代码是使用 Element UI 中的表单组件实现了一个表单，包含四个表单项，分别是主机、端口、用户和密码。其中 `:model="form"` 绑定了表单数据模型，即 `data` 中的 `form` 对象。每个表单项都使用了 `el-form-item` 组件包裹，并且设置了对应的标签和标签宽度。`el-input` 组件作为表单项的输入框，通过 `v-model` 指令与表单数据模型中的属性进行双向数据绑定，当用户在输入框中输入内容时，表单数据模型中的属性值也会随之改变。其中密码框使用了 `type="password"` 属性，使得输入的内容显示为星号，增加了安全性。