v-model基本用法--单选框/多选框/input/下拉选择框

V-model单选框

原来的写法是用同一个name属性，确保选择的时候是单选状态，
此时我们不再需要name属性，只需要使用v-model指令给每个选项绑定
同一个变量就，可以确保同一时间只有一个被选中，
同时value属性还是需要的，表示选中时的值。

<template>
  <div>
    <p>性别：</p>
    <input type="radio" v-model="first" value="man" />男
    <input type="radio" v-model="first" value="woman" />女
    <p>已选：{
   
   {
   
    first }}</p>
  </div>
  <!-- 
      原来的写法是用同一个name属性，确保选择的时候是单选状态，
      此时我们不再需要name属性，只需要使用v-model指令给每个选项绑定同一个变量，可以确保同一时间只有一个被选中，
      同时**value**属性还是需要的，表示选中时的值。
   -->
</template>
<script>
export default {
   
   
  data() {
   
   
    return {
   
   
      first: ""
    };
  }
};
</script>

v-model多选框

多个复选框，绑定到同一个数组：