使用 vue 为 image src 赋值

更新日期: 2019-03-10 阅读次数: 56706 分类: VueJS

今天写了这么一段代码

<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 聊聊, 查看更多联系方式