v-bind 和 v-model 的区别：你真的懂了吗？-踏浪而行生活圈 - 前端、H5、资讯、分享、网站开发等资源分享

v-bind与v-model是Vue.js中常用的两个指令，它们都可以用来绑定数据和视图，但是它们之间有一些重要的区别，本文将详细介绍这些区别。

v-bind指令用来将数据绑定到视图的属性上，比如绑定一个图片的src属性或者一个链接的href属性。v-bind指令可以使用简写形式，即在属性名前加一个冒号，比如:src或者:href。v-bind指令的作用是单向的，也就是说只能从数据到视图，不能从视图到数据。如果我们想要实现双向绑定，就需要使用v-model指令。

v-model指令用来将数据绑定到表单元素上，比如输入框、单选框、复选框等。v-model指令可以实现双向绑定，也就是说既能从数据到视图，也能从视图到数据。当我们在表单元素上输入或者选择时，数据会自动更新；当我们在代码中修改数据时，视图也会自动更新。v-model指令只能用在表单元素上，不能用在普通的元素上。

v-bind与v-model的区别可以用一个简单的例子来说明。假设我们有一个输入框和一个显示框，我们想要实现输入框中的内容实时显示在显示框中。如果我们使用v-bind指令，代码如下：

<input type="text" v-bind:value="message">
<div>{{ message }}</div>

这样我们可以实现从数据到视图的绑定，也就是说当我们在代码中修改message时，输入框和显示框都会更新。但是如果我们在输入框中输入内容，显示框并不会更新，因为v-bind指令不能实现从视图到数据的绑定。如果我们想要实现双向绑定，就需要使用v-model指令，代码如下：

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

这样我们就可以实现双向绑定，也就是说无论我们在输入框中输入内容还是在代码中修改message，输入框和显示框都会同步更新。

v-bind除了可以这样应用之外，还可以应用于css中。单文件组件的 <style> 标签支持使用 v-bind CSS 函数将 CSS 的值链接到动态的组件状态：

<template>
  <div class="text">hello</div>
</template>

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

<style>
.text {
  color: v-bind(color);
}
</style>

这个语法同样也适用于 <script setup>，且支持 JavaScript 表达式 (需要用引号包裹起来)：

<script setup>
const theme = {
  color: 'red'
}
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

实际的值会被编译成哈希化的 CSS 自定义属性，因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新。

总结一下，v-bind与v-model的区别有以下几点：

v-bind用来将数据绑定到视图的属性上，v-model用来将数据绑定到表单元素上。

v-bind只能实现单向绑定，从数据到视图，v-model可以实现双向绑定，从数据到视图和从视图到数据。

v-bind可以用在任何元素上，v-model只能用在表单元素上。

v-bind可以使用简写形式，在属性名前加冒号，v-model没有简写形式。