vue新手遇到的问题，v-for不起作用

最新推荐文章于 2024-04-18 19:32:22 发布
最新推荐文章于 2024-04-18 19:32:22 发布
阅读量355 收藏
点赞数
分类专栏： vue路上犯的错555 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53994892/article/details/132924650
版权

使用v-for循环渲染页面，一直处于识别不了{{ }}的情况

如下图

检查了很多也没发现问题，直到突然在检查那里的vue点了一下root地方，发现只有一处高亮，于是怀疑第二处没有被选上，所以才得以解决这个问题。

我犯的错误是使用了相同的id在不同的盒子，导致后来的盒子被覆盖了。

不能贪快呀。。。

qq_53994892
关注
专栏目录
vue掉坑之旅(1) —— v-for 指令渲染数据失效
oooooomit 博客
05-24 6905
一、v-for指令 1. v-for 作用 对数组进行遍历，通过特殊语法，对列表、表格或下拉框渲染数据； Tips：类似foreach、for的作用，语法跟foreach类似 2. v-for 语法 根据官方教程，我们可以看到： 二、我是怎么掉坑的 1. 情景     在前台我拿到了后台返回的数据，想要对其表格进行渲染； 2. 为什么坑？     通过 Chrome 开发工具，能够清楚的看到数据的返回以及相应变量接收是没问题
vue-项目使用过程中遇到的一些问题
ruko9805的博客
04-25 502
vue-项目使用过程中遇到的一些问题 最近项目比较忙，五一前要把初版做完，周六加了一天班，今天收尾，明天做测试联调，改改bug，后面再找用户提提意见，估计晃晃悠悠就到五一了。 项目确实让人成长，我是个新手，项目过程中不是难免，是必定遇到了很多问题，我想记下来，一些技术上的盲点，还有一些思维上的盲点。 问题一 Cannot read property ‘xxx’ of undefined 这类问题 这个错误，在vue代码撰写中经常遇到。 原因主要分为这几类 原因一、你调用的数据没有初始化 解决方法，在你
v-for循环失败原因及解决
我爱美女S的博客
06-25 2635
v-for 与script位置有关
Vue中的v-for指令不起效果
热门推荐
灵魂画师牧码
08-07 1万+
我的代码之前类似下面的结构<div id="example-1" v-for="item in items"> <ul> <li> {{ item.message }} </li> </ul> </div>结果发现不好用，数据读入了但是没有显示 于是我后来看官网的例子才明白，原来是id和v-for不在一个层级上，官网的例子如下，我
Vue中的v-for指令不起效果的解决方法
10-17
今天小编就为大家分享一篇Vue中的v-for指令不起效果的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
写给vue新手们的vue渲染页面教程
08-29
对于Vue新手来说，理解如何渲染页面是学习的关键步骤。以下是一个详细的Vue页面渲染教程。 首先，我们从基础开始。在Vue应用中，页面渲染主要是通过模板（Template）和组件（Component）来实现的。Vue模板使用的是...
vue-element-master.zip
01-08
6. **完善的社区支持**：由于Vue.js和Element UI的广泛使用，它们拥有庞大的社区和丰富的插件，遇到问题时可以很容易找到解决方案。 "vue-element-master.zip" 包含的可能是一个预配置的项目结构，包括了Vue.js和...
Excel模板一篇超完整的Vue新手入门指导教程.pdf
最新发布
05-17
### Vue新手入门指导教程知识点概览 #### 一、Vue基础概述 - **定义与特点**： - **定义**：Vue是一个渐进式的JavaScript框架，主要用于构建用户界面。 - **特点**： - **响应式数据绑定**：Vue能够自动追踪...
新手安装VSCode+Vue项目运行手册（适合新手）
12-16
【Vue项目运行手册：新手与VSCode安装指南】 在当今的前端开发领域，Vue.js已经成为了备受青睐的JavaScript框架之一，而...记得在过程中遇到问题时，善用搜索引擎和社区资源，你会逐渐成长为一名熟练的Vue开发者。
vue组件for循环无效果的原因之一
zero_person_xianzi的博客
11-21 2919
Vue.component('test', { props: ['sites'], template: '&lt;li v-for="item in sites"&gt;&lt;div class="Commodity-details"&gt;&lt;img v-bind:src="item.commodityImage"&gt;&lt;div class="details
Vue的v-for遍历中的自定义指令无效
第一行代码
06-20 3163
问题发现 在v-for循环中，通过自定义指令获取循环中每一项的值，然后进行处理，第一次进行v-for遍历，可以正常获取值，并渲染页面，但是list被重新赋值，第二次v-for遍历的时候，在页面中可以直接获取值，但是在指令中无法获取最新的值，只能获取比第一次遍历的List多的几个元素的值 原因分析 代码： <div v-for="item,index in list" :key="index"> <td >{{item.id}}</td>
v-if或者v-repeat等不起作用
weixin_34206899的博客
03-07 188
v-if或者v-for等不起作用 在项目中，有时遇到了v-if或v-for等形式时，页面没起作用。以下可能是出现这些问题的原因： 1、绑定值是接口返回的某个属性值，而这个属性值不存在data()中，这个时候会不起作用。 数据和 DOM 已经被建立了关联，所有东西都是响应式的。要将和dom关联的数据写入data中。 例如：我们要把textflag事先放在data()的return中...
Vue遇到v-for循环显示不出来的坑
m0_68076368的博客
04-18 556
{{i}}
vue 更新数组之后 v-for不起作用_vue模板语法之分支循环结构
weixin_39804641的博客
01-26 1719
最近把生活过得一团糟整个人都处于颓废的状态…都是想起来就学一下，不然的话，其余时间都在玩，浪费时间的同时，对身体也不好。扯远了，是时候回到正题了，由于最近在看教资的复习资料，以致于关于vue系列的学习都没有更新了，今日份就继续vue的学习伐~~整理了有关vue模板语法之分支循环结构的内容，v-if、v-else、v-show、 v-for的一些知识。一、分支结构1、v-if：(1)原理：...
v-for循环中 ，key怎么完全不起作用？
Notheror的博客
04-30 1057
我的顺溜之 前端之路（急难千金方（个人版/滑稽脸）----------） 今天写v-for循环时候，使用key来保证数据的唯一性 却发现数据变动时候，我的Key并未生效。 没图不太直观 如上所示数据变动前的abcd和变动后的abcd,不加key的话二者之间的联系就是一种数组内的对位联系（新旧数组索引相同处），加了key之后，就能把数据准确对应联系起来。 一般key 的选用最好是 数字/字符串 ...
v-for 无法遍历数据，不执行循环
飞鸿小子的博客
08-14 8883
myAdsList:function(){ var myAdsList = [ { "id": 4, "area": "广东省广州市", "info": "123", ...
小程序给v-for生成的元素随机值不生效
豆。的博客
03-31 618
今天用uni-app开发项目时写了个动画，让v-for生成的每个元素不同的上下浮动。起初觉得挺简单的因为浮动动画都一样的，只要给每个元素一个很小时间的延迟间隔（animation-delay）就可以了。
解决：vue3使用axios返回json用v-for遍历失效，标签不渲染
qq_38995802的博客
03-25 2267
使用axios获取到result对象之后，取得result.data的对应的json对象，通过foreach遍历然后把每一个对象数组push到自己定义的响应式数组中。不能直接赋值，比如说。axios请求过来的json对象打印为数组，一开始我是用的ref()变为响应式，但是数组应该在定义初始化的时候用reactive。究其本身他v-for本身不渲染，判断是否为空并没有什么意义。第一种就是在v-for外面包一层v-if，判断收到的数据不为空才显示。axios请求在dom渲染之后，但是一顿操作之后还是没有用。
Vue v-model与v-for指令深度解析
总结来说，v-model和v-for是Vue.js中两个不可或缺的关键指令，它们结合使用能极大地简化前端开发中的数据绑定和动态渲染过程，提高了开发效率和代码可读性。熟练掌握这两个指令对于任何 Vue 开发者来说都是非常重要...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值