VUE里v-model

在Vue中，v-model是一个用于在表单元素上创建双向数据绑定的指令。它可以轻松地将表单输入和应用程序状态之间的数据同步。v-model指令可以应用于各种表单元素，如文本输入框、单选按钮、复选框、下拉列表等。

下面是v-model的一些用法：

1.文本输入框

<template>
  <div>
    <input type="text" v-model="message">
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

2.单选按钮

<template>
  <div>
    <input type="radio" id="male" value="male" v-model="gender">
    <label for="male">Male</label>
    <br>
    <input type="radio" id="female" value="female" v-model="gender">
    <label for="female">Female</label>
    <br>
    <p>Gender: {{ gender }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gender: ''
    }
  }
}
</script>

3.复选框

<template>
  <div>
    <input type="checkbox" id="agree" v-model="agree">
    <label for="agree">I agree to the terms and conditions</label>
    <br>
    <p>Agree: {{ agree }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      agree: false
    }
  }
}
</script>

4.下拉列表

<template>
  <div>
    <select v-model="selected">
      <option disabled value="">Please select one</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <p>Selected: {{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: ''
    }
  }
}
</script>