详解vue v-model

当我们学习Vue框架时，v-model是一个很重要的概念。v-model指令可以在表单(input, textarea, select)元素上创建双向数据绑定。它可以把表单中用户输入的数据，绑定到Vue实例中的数据属性上；同时，当Vue实例中的数据属性发生变化时，它会同步到表单中去。

1. 如何使用v-model

v-model绑定到表单元素上，它的值是绑定的数据属性名称。例如：

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

这里的message就是Vue实例的一个数据属性。在用户输入文本时，v-model会同步更新message的值。在Vue实例中相关代码如下：

var vm = new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

上面的代码中，我们定义了一个Vue实例，并声明了一个message数据属性。在HTML中使用v-model指令，将message与文本框进行了双向绑定。

2. v-model的用法示例

2.1 文本框绑定简单的字符串

我们可以使用v-model指令，将一个文本框绑定到Vue实例中的数据属性。当用户在文本框中输入字符时，绑定的数据属性会自动同步更新。

<template>
  <div>
    <input type="text" v-model="name">
    <p>你输入的是：{{ name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ""
    };
  }
};
</script>

在上面的代码中，我们将一个文本框和一个p标签绑定到Vue实例中的数据属性name上。用户在文本框中输入字符时，p标签中显示更新后的name的值。

2.2 单选框绑定布尔值

当我们使用单选框（radio）组来表示两种不同状态时，可以使用v-model中的布尔值来对状态进行切换。

<template>
  <div>
    <input type="radio" v-model="selected" value="yes"> 是
    <input type="radio" v-model="selected" value="no"> 否
    <p>你选择的是：{{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: "no"
    };
  }
};
</script>

在上面的代码中，我们使用两个单选框来表示“是”和“否”。其中，v-model绑定的是selected数据属性，其默认值为“否”。当用户选择“是”时，selected的值会变为“是”，并用{{ selected }}显示在页面上。

结语

v-model可以让我们更方便地处理表单元素和Vue实例中的数据属性之间的数据交互，是Vue框架中一个比较实用的指令。在实际应用中，我们可以根据情况使用不同的输入类型，来应对不同的业务场景需求。