Vue里面的v-for绑定数据改成Javascript的for循环

最新推荐文章于 2022-08-31 19:35:23 发布
最新推荐文章于 2022-08-31 19:35:23 发布
阅读量430 收藏
点赞数
分类专栏： 常见问题总结 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengtingYan/article/details/85284264
版权
本文探讨了如何将Vue中v-for指令用于数据绑定的代码转换为JavaScript的for循环实现。通过实例解析，详细阐述了两种方式在渲染列表和处理数据时的差异，帮助开发者更好地理解和掌握这两种遍历方法。
摘要由CSDN通过智能技术生成

源：

<div id="item-news-head" class="mui-control-content mui-active">
	<ul class="mui-table-view " id="newsHead" v-for="head in heads">
			<li class="mui-table-view-cell mui-media">
				<div v-on:click="newsDetail(head)">
					<img class="mui-media-object mui-pull-left" :src="head.newsUrlImg ? head.newsUrlImg : 'images/news.jpg'">
					<div class="mui-media-body">
						<span v-text="head.newsTitle"></span>
						<p class="mui-ellipsis" v-text="head.newsSummary"></p>
					</div>
				</div>
			</li>
		</ul> 
	<!--加载更多按钮-->
	<div class="js-load-more">加载更多</div>
</div>

改：

/*使用for循环模拟SQL里的limit(offset,size)*/
for (var i = offset; i < (offse
最低0.47元/天 解锁文章
宝儿的程序生涯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3知识点2. 常用指令v-model :value v-if v-show v-for v-bind: :class :style v-on @
yangyangdt的博客
12-19 9212
vue3基础知识点2 前言： 上一章已经学会如何创建vue实例了，这一章是vue一些的基础知识点，包括模板语言，以及常见的一些命令。最底部有运行好的全部代码链接。
VUE项目开发实践——V-for特殊数据结构嵌套
Y_anCy的博客
11-28 1828
//正常 &lt;ul id="example-1"&gt; &lt;li v-for="item in object"&gt; {{ item.message }} &lt;/li&gt; &lt;/ul&gt; //索引； &lt;div v-for="(value, key, index) in object"&gt;
#关于用好vue中的v-for循环的方法总结
老衲的少女心i~
08-04 4469
首先，我们来介绍一下，v-for官方文档上的基本用法 官网上：v-for的基本用法 基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名： <div v-for="item in items"> {{ item.text }} </div> 另外也可以为数组索引指定别名 (或者用于对象的键)： <div v-for="(item, index) in items"></div> &
微信小程序报错 Bad attr `wx:key` with message: unexpected token `*`.
江南雨
11-29 8535
  搜索以上错误代码：wx:key = “{{*this}}” 改成 wx:key = “*this” 预览测试即可     wx:key  如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 中的输入内容， 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。 wx:key 的值以两种形式提供 字符串，代表在 fo...
mui + vue轮播图处理
qq_35177046的博客
12-07 649
mui + vue轮播图处理html代码js部分 html代码 &lt;div id="slider" class="mui-slider"&gt; &lt;div class="mui-slider-group mui-slider-loop"&gt; &lt;!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播图片) --&gt; &lt;div class=&q
使用vue-awesome-swiper轮播图插件中遇到的几个问题
liushun1223的博客
12-14 1153
项目中，有一个轮播图的效果，网上差了许多资料后，决定使用vue-awesome-swiper这个开源的vue轮播图插件。 由于我需要使用coverFlow的效果，所以就去官网在线示例中寻找样例代码。官方样式示例。 示范代码如下： <template> <div class="example-3d"> <swiper class="swiper" :options="swiperOption"> <swiper-slide>Slide 1
Vue-条件渲染和循环渲染
qq_64067728的博客
08-31 795
条件渲染一共有两个v-if 和 v-show当设置为false时，他们都会使对应标签在浏览器中消失，true的时候都会出现，而两个条件渲染方法，虽然都是让标签在浏览器中消失，却有所不同。
VUE项目--卖座app
beeliang
05-27 2168
一.由于做移动端，所以先根据设计稿设置好设置rem 二、做轮播图 2.使用swiper引入轮播图 1）现在flims文件下自定义film-swiper组件，来显示大轮播，注意加上key值，不然会加载过早。 2）自定义一个film-swiper-item组件包裹着轮播数据 <film-swiper :key="datalist.length"> <film-swiper-item v-for="data in datalist" :key="data.filmId" cl
vue v-for循环得到下标
weixin_40841731的博客
10-08 5013
&lt;template v-for="(item,index) in data"&gt;       ........ &lt;/template&gt; index就是下标     结语：本人所有文章都立志写的简单易懂，戳中问题点。 当然了，简单的同时可能忽略了很多细节与详细，如有不足的地方，还请谅解并指出。  如对文章或实现技术上有问题，可联系我：qq: 1226500260  ...
vue v-for循环回来的数据动态绑定id
qq_24612793的博客
07-28 2万+
 代码效果图!!!!! &lt;ul&gt; &lt;li v-for="(site,index) in sites" :key="index" :id="forId(index)"&gt; &lt;span class="channel-li-li-border"&gt; &lt;span class="firstLevel"&gt;
vue中v-for的用法
热门推荐
前端岚枫
03-05 12万+
当需要将一个数组遍历或枚举一个对象循环显示时候，我常用的就是列表渲染指令v-for. 它需要结合着in 或者of来使用，如下 &lt;div id="app"&gt; &lt;ul&gt; &lt;li v-for="（person, index） in persons"&gt; {{ person.name }} &lt;/li&gt; &lt;/ul&gt; &lt;/
v-for获取最后一条记录
遛弯的兔子
10-18 1万+
最近一直在用mui+vue.js做手机移动端项目，v-for用了许多，由于某个列表需要在列表最后一条加上条件判断，整理一下代码: {{grant.curUser.name }}            授权给→ {{agent.name}}             授权给→
Vue中v-for与for in的区别js
qq_38402659的博客
02-23 1万+
在Vue中v-for ="(value, index) in list" 在for(let index,item in list){} 为了避免顺序混淆建议大家在Vue模板中使用v-for = “(value,index) of list”
vue中使用mui遇到的坑
weixin_43991262的博客
06-12 1660
1、导入mui之后报错 在刚把mui导入vue项目中，项目会报错 Uncaught TypeError: ‘caller’, ‘callee’, and ‘arguments’ properties may not be accessed on strict mode functions or the arguments objects for calls to them 错误原因： mui在使用...
在vue js中for循环使用
web全栈开发的博客
06-26 5万+
1、for(let item of response.data.result) { 用item操作每一条数据。 } item：定义的每一条的变量 response.data.result：要循环的数组 2、response.data.result.forEach((item, index) => { 用item操作每一条数据。 }） response.data.result：要循环的数组 i...
vue的v-for循环指令
幸福有多远
04-09 2962
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;script src="js/vue.js"&gt;&lt;/script&gt; &lt;title&gt;&lt;/title&a
vue v-model绑定v-for
最新发布
04-21
在Vue中，v-model指令用于实现双向数据绑定，而v-for指令用于循环渲染列表。当它们结合使用时，可以实现对循环列表中每个元素的双向数据绑定。 具体实现方式如下： 1. 首先，使用v-for指令循环遍历一个数组或对象，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值