面试题：Vue中v-model在文本框和复选框使用时的双向绑定原理

Question

请阐述在Vue中，v-model是如何实现文本框与数据的双向绑定以及复选框与数据的双向绑定的，结合具体示例代码说明其原理。

Answer 1

文本框双向绑定

在Vue中，v-model指令在文本框上实现双向绑定的原理是：它是value属性和input事件的语法糖。

示例代码如下：

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

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

原理：v-model会为<input>元素绑定value属性，值为message，当文本框内容发生变化时，会触发input事件，Vue会自动更新message的值，同时<p>标签中绑定的message也会随之更新，实现双向绑定。

复选框双向绑定

对于复选框，v-model的双向绑定原理稍有不同。它会根据v-model绑定的值是否在复选框的value数组中来确定复选框是否选中。

示例代码如下：

<template>
  <div>
    <input type="checkbox" v-model="isChecked">
    <p>{{ isChecked ? '选中' : '未选中' }}</p>
  </div>
</template>

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

当复选框状态改变时，isChecked的值会相应改变，同时<p>标签中的文本也会根据isChecked的值更新，实现双向绑定。如果是多个复选框绑定到一个数组：

<template>
  <div>
    <input type="checkbox" value="apple" v-model="selectedFruits">苹果
    <input type="checkbox" value="banana" v-model="selectedFruits">香蕉
    <input type="checkbox" value="cherry" v-model="selectedFruits">樱桃
    <p>{{ selectedFruits }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFruits: []
    }
  }
}
</script>

v-model会根据复选框的value判断是否添加或移除数组中的值，实现双向同步。