【Vue学习笔记_09】v-model绑定表单元素

Vue使用v-model指令实现表单元素和数据的双向绑定

配套可执行代码示例 => GitHub

v-model基本使用和原理

<input>、<textarea>等表单元素通过v-model实现了value属性和data数据的双向绑定。

<div id="app">
  <input type="text" v-model="msg">
  {
  {msg}}
</div>

<script>
  const app = new Vue({
     
    el: '#app',
    data: {
     
      msg: 'Hello'
    }
  })
</script>

原理：v-model其实是一个语法糖，它的背后本质上包含两个操作，一是v-bind绑定value属性，二是v-on绑定input事件。

<input type="text" :value="msg" @input="msg = $event.target.value">

v-model绑定radio元素

v-model绑定一个字符串变量，变量值对应着选中的radio元素的value值。

当多个radio元素使用v-model绑定了同一个变量时，同组单选按钮的互斥已经形成，name="sex"此时可以省略。

当sex变量默认值为“男”时，会默认选择第一个单选按钮。

<div id="app">
  <label for="male">
    <input type="radio" id="male" name="sex" value="男" v-model="sex">男
  </label>
  <label for="female"