面试官 : “ 说一下插值表达式和 v-bind 的区别 ? ”插值表达式和v-bind虽然都能渲染数据，但适用场景

插值表达式和v-bind虽然都能渲染数据，但适用场景和功能完全不同，这是两者同时存在的核心原因：

插值表达式（{{ }}）只能用于标签的内容区域，无法作用于标签的属性。

比如，你想把数据绑定到input的value属性、img的src属性，用插值表达式会失效：

<!-- 错误：插值不能写在属性里 -->
<img src="{{ imgUrl }}">
<input value="{{ inputValue }}">

v-bind（可简写为:）的作用是将数据绑定到标签的属性上，弥补了插值表达式的局限：

<!-- 正确：用v-bind绑定属性 -->
<img v-bind:src="imgUrl">
<input :value="inputValue">

v-bind还能实现动态控制属性的存在 / 状态（插值表达式做不到）：

控制class/style的动态切换：

<div :class="{ active: isActive }"></div>
<div :style="{ color: fontColor }"></div>

控制布尔类型属性（如disabled/checked）：
```
<button :disabled="isDisabled">按钮</button>
```

面试官 : “ 说一下 插值表达式 和 v-bind 的区别 ? ”