vue：v-bind访问数组下标方式，动态绑定属性值，导致无法报错或无法正常显示图片

最新推荐文章于 2024-07-17 08:39:25 发布
最新推荐文章于 2024-07-17 08:39:25 发布
阅读量481 收藏
点赞数
分类专栏： javascript 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36604863/article/details/125058259
版权
本文讨论了在Vue中使用v-bind通过数组下标动态绑定属性值时遇到的问题，由于JavaScript的特性，这种访问方式可能不触发Vue的数据绑定，从而导致图片无法正常显示或无错误提示。解决方案是采用正确的方式来确保数据绑定生效。
摘要由CSDN通过智能技术生成

vue：v-bind访问数组下标方式，动态绑定属性值，导致无法报错或无法正常显示图片

原因：受javascript的特性影响，使用数组下标方式访问是不会触发vue的数据绑定：
可以采用这种方式：

<img :src="img1">

new Vue(){
   
	data()
最低0.47元/天 解锁文章
前后端杂货铺
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【Vue学习笔记_09】v-model绑定表单元素
weixin_44752429的博客
11-27 1723
【Vue学习笔记_09】v-model绑定表单元素v-model基本使用和原理v-model绑定radio元素v-model绑定checkbox元素checkbox单选框checkbox复选框v-model绑定select元素select单选select多选v-bind绑定input初始值v-model修饰符.lazy.number.trim Vue使用v-model指令实现表单元素和数据的双向绑定 配套可执行代码示例 => GitHub v-model基本使用和原理 <input>、&l
[vue] img v-bind:src 图片不展示问题（坑）
jinwenshuo2007的博客
06-27 866
动态绑定img中的src属性，要使用require
[vuejs短文]使用vue-transition制作小小轮播图
weixin_30315723的博客
11-06 151
提示 本文是个人的一点小笔记,用来记录开发中遇到的轮播图问题和vue-transition问题. 会不断学习各种轮播图添加到本文当中 也有可能会上线,方便看效果 开始制作 超简易呼吸轮播 简单粗暴的使用vue transition制作的轮播图,这里解释一下原理 动画效果就像车辆穿行隧道,定好初始位置/最终位置,设定好运动规则,它就自动开了.在下面的实例中,我们设定好了运行规则,和分别两种状态...
Vue 中根据对象数组下标修改和删除内容的实现方法
最新发布
李长渊的博客
07-17 1329
Vue 中根据对象数组下标修改和删除内容的实现方法
Nuxt.js 使用v-bind语法绑定img的src不显示问题
追梦i赤子心的博客
12-06 664
Nuxt.js 使用v-bind语法绑定img的src不显示……
v-bind动态绑定style(对象语法、数组语法)
qq_46112274的博客
11-02 573
v-bind动态绑定style--对象语法、数组语法1、对象语法1.1、方法一：当作属性值使用1.2、方法二：当作变量使用1.3、方法三：（属性：值）来自与函数2、数组语法 1、对象语法 1.1、方法一：当作属性值使用 <script> <div id="app"> //<h2 :style="{key(属性名):value:(属性值)}">{{message}}</h2> //把50px当作属性值使用。如果50px不加单引号，那么vue会把5
vue之v-bind绑定的数据是使用数组下标访问的元素报错原因
Hello World
08-08 1337
template模板中： script的data： data(){ return { worksCaseList:[ { coverImgUrl:'./image/1.jpg', title:'1' }, { coverImgUrl:'./image/2.jpg', title:'2' }, ...... ] } } 报错： 原因： 受javascripy的特性限制，使用数组下标的方式访问实不会触发Vue的数据绑定 vue官网
一文读懂vue动态属性数据绑定（v-bind指令）.docx
01-22
v-bind 指令不仅可以绑定单个属性值，也可以绑定对象和数组。例如，使用对象语法绑定 class 属性： ```html <h2 v-bind:class="{cssClassName1: true, cssClassName2: false}">标题 ``` 在上面的代码中，v-bind:...
vue动态html 怎么绑定数据,一文读懂vue动态属性数据绑定（v-bind指令）
weixin_33346418的博客
06-04 1455
v-bind的基本用法一、本节说明前面的章节我们学习了如何向页面html标签进行插值操作，那么如果我们想动态改变html标签的属性，该怎么办呢？这就是我们这节开始要讲的内容v-bind.二、 怎么做“:”为v-bind的简写形式，也可称为语法糖三、 效果四、 深入在上图中将a标签的href属性值设置为toutiao，VUE实例将自动去data里面寻找toutiao属性进行值绑定。不只是a标签，所有...
html bind属性,一文读懂vue动态属性数据绑定（v-bind指令）
weixin_42500739的博客
06-04 1412
v-bind的基本用法一、本节说明前面的章节我们学习了如何向页面html标签进行插值操作，那么如果我们想动态改变html标签的属性，该怎么办呢？这就是我们这节开始要讲的内容v-bind.二、 怎么做“:”为v-bind的简写形式，也可称为语法糖三、 效果四、 深入在上图中将a标签的href属性值设置为toutiao，VUE实例将自动去data里面寻找toutiao属性进行值绑定。不只是a标签，所有...
Vue 数据绑定失败问题
追风2019
04-08 1484
Vue 通过对数据的操作改变html 的 dom 显示，使得前端开发聚焦于对数据的逻辑的操作。 昨天遇到一个问题：设置一个数组变量，通过 http 请求后端，循环遍历获取数据，期望可以实现数据改变后自动渲染到 dom，但结果是数据时有时无，代码如下： <select class="select select-middle" v-model="val"> <optio...
vue v-bind没有生效
RubyLinT的博客
07-19 823
封装组件，调用时直接在父容器里v-bind将属性传值给组件，怎么试都没生效，后来发现是写法错了。
vue2通过下标修改数组数据或新增对象属性时 没有双向数据绑定的解决方法
qq_46370075的博客
06-10 1291
vue2 使用this.$set解决 通过下标改变数组数据没有引起组件重新渲染的问题
【Vue】img的src使用了v-bind后报错
Shino_jie的博客
06-19 564
报错信息：找不到图片原因：大概是vue脚手架运行项目时，项目被打包后在浏览器里路径就不一致了？解决办法：在data里的url使用require导入图片就能正常使用了
vue项目跳转后排版错乱 刷新会好
weixin_45172409的博客
06-28 689
路由跳转后排版错乱
vue 使用mint-ui v-bind绑定图片地址，图片无法显示的问题
16crow的博客
10-16 737
如下图为例，通过v-bind绑定图片地址时，使用一般路径（没有require）是无法正常显示图片的，因为这样做无法调用相关loader来解析图片。 解决方法：通过require（‘‘xxx/xxx.png’’）来代替原本的图片地址 ...
Vue项目中使用v-bind引入图片路径出现图片未找到的问题
violetjack的专栏
06-27 4458
问题 由于项目图片在打包后图片名会跟上一串hash值，并且相对路径会改变。所以： &lt;img src="../../assets/logo.png"/&gt; 这么写是可以的，因为打包的时候会自动锁定图片路径。 &lt;img :src="url"/&gt; data { url: '../../assets/logo.png' } 这么写就会出现图片路径不对，无法找到...
Vue动态属性绑定详解：v-bind指令
"本文主要介绍Vue.js中的动态属性数据绑定，特别是v-bind指令的使用方法和常见应用场景。" Vue.js是一个流行的前端JavaScript框架，用于构建用户界面。在Vue中，数据绑定是其核心特性之一，它允许开发者将数据模型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前后端杂货铺

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值