Vuetify v-tabs组件v-bind:value失效，改用v-model生效的原因及v-model适用范围疑问

嗨，我来帮你把这个问题掰扯清楚～

为什么:value没效果，换成v-model就正常了？ #

咱们先看你写的这段代码：

<v-tabs :value="tab">
  <v-tab href="#page-2">
    {{ 'students' }}
  </v-tab>
  <v-tab href="#page-1">
    {{ 'professors' }}
  </v-tab>
</v-tabs>

当你用:value="tab"的时候，这只是单向绑定——你把tab的值传给了v-tabs组件，让它默认选中对应标签，但点击另一个标签时，组件内部的选中状态变了，可你的tab变量并没有被同步更新啊！组件会立刻根据你绑定的:value（也就是原来的tab值）把选中状态切回去，所以看起来点击标签完全没反应。

而v-model是双向绑定的语法糖，它做了两件事：一是把tab的值传给组件的value prop，二是自动监听组件的change事件（Vuetify的v-tabs用的是change事件来通知选中状态变化），把新的选中值同步回你的tab变量。这样组件的选中状态和你的变量始终保持一致，点击标签自然就能切换了。

如果非要用:value实现同样效果，你得手动监听事件更新变量，写法是这样的：

<v-tabs :value="tab" @change="tab = $event">
  <v-tab href="#page-2">
    {{ 'students' }}
  </v-tab>
  <v-tab href="#page-1">
    {{ 'professors' }}
  </v-tab>
</v-tabs>

是不是感觉v-model方便多了？它就是帮你省了手动写监听事件的步骤～

关于v-model的适用范围，你之前的理解有点小偏差哦 #

你以为v-model只适用于表单输入元素？其实不是的！v-model的本质是基于组件的value prop和对应的事件（通常是input，但有些组件比如v-tabs用的是change）实现的语法糖。只要一个组件对外暴露了value prop，并且会在状态变化时触发对应的事件，v-model就能和它配合使用。

Vuetify的很多组件（比如v-tabs、v-select、v-switch这些）都实现了这个机制，所以它们都支持v-model双向绑定，不只是表单里的输入框、单选框这些。

备注：内容来源于stack exchange，提问作者nidhou gsm