使用 vue 为 image src 赋值

今天写了这么一段代码

<img src="{{ img_src }}" >

img_src 是 vue 里存储图片地址的一个变量。然后，这段代码报错了。。。

Google 了一下，才知道正确的写法应该是

<img :src="img_src" />

原来我是个大xx。。。

mustache 的变量括号不能用于 HTML 属性

对应 HTML 属性，需要使用 v-bind，即

<img v-bind:src="img_src" />

v-bind 可以缩写为 :, 即

<img :src="img_src" />

惭愧地读了一遍相关文档

https://cn.vuejs.org/v2/guide/syntax.html#插值

才知道，这两个缩写

• v-bind: :
• v-on: @

v-model 与 v-bind, 以及 mustache 大括号的区别又是什么？

https://cn.vuejs.org/v2/guide/forms.html#在组件上使用-v-model

v-model 只能用于 input, textarea, select 上，做双向绑定之用。

而 v-bind 只能用于 HTML 属性。

如何图片 404 怎么办

参考 VueJS 将 404 图片替换为默认图片

微信关注我哦 👍

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式