v-bind和{{}}都可以用来对数据进行绑定，但是二者有区别。v-bind是通过指令将数据绑定到元素的上，而{{}}是通过插
值表达式将数据显示在文本节点中。
引用中提到，v-bind在进行数据绑定时会完全替换属性的
值，所以如果你想要进行
字符串的
拼接，v-bind可能不是很好的选择。举个例子，如果我们有一个变量`text`，我们想将它与一个固定的
字符串拼接后赋
值给一个元素的属性，使用v-bind做不到。比如：
```
<div v-bind:
class="'my-
class ' + text"></div>
```
这样写是错误的，因为v-bind会将整个属性
值替换为`'my-
class ' + text`，而不是进行
字符串拼接。
然而，使用插
值表达式{{}}就可以很方便地进行
字符串拼接，例如：
```
<div
class="my-
class {{ text }}"></div>
```
这样，`text`的
值会被
动态地
拼接到
class属性中。
综上所述，如果你需要进行
字符串拼接，使用插
值表达式{{}}会更方便。<span
class="em">1</span><span
class="em">2</span><span
class="em">3</span>
#### 引用[.reference_title]
- *1* [深入浅析AngularJs模版与v-bind](https://download.youkuaiyun.com/download/weixin_38590738/14827076)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [
vue中的v-model](https://blog.youkuaiyun.com/qq_44439022/article/details/107171764)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [
Vue项目上绑定变量与
字符串拼接-案例](https://blog.youkuaiyun.com/JackieDYH/article/details/124180196)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]
扫一扫
3263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
