vue 列表渲染

关注

原创最新推荐文章于 2026-07-14 09:12:45 发布 255 阅读 AI 写同款· GEO 优化 ›

Open3D：Win10 + VS2017配置Open3D（C++、python）一、下载源码地址：https://github.com/intel-isl/Open3D 1.1 克隆源码【笔者的源码路径为D:\Open3D\Open3D】 1.2 切换版本【笔者的版本为0.8.0】 1.3 更新子模块【用于获取第三方库！很重要！】二、CMake编译 2.1 设置路径【source code: D:\Open3D\Open3D；build binaries: D:\Open3D】【笔者设置CMAKE/CMAKE_INSTALL_PREFIX的路径为D:/Open. 阅读详情

数组循环渲染

v-for 命名用于列表渲染，最简单的一个例子：

	<div id="app">
		<div v-for="(item,index) of onelist">
			{{item}} ------ {{index}}
		</div>
	</div>
	<script>
		var app = new Vue({
			el: '#app',
			data:{
				onelist: [
				"hello",
				"nice",
				'to',
				'meet',
				'you']
			}
		})

给渲染元素一个唯一的key 值(可提高性能，性能优时key 值唯一，且不要让index做key 值)，下面为代码：

	<div id="app">
		<div v-for="(item,index) of onelist" :key="item.id">
			{{item.text}} ------ {{index}}
		</div>
	</div>
	<script>
		var app = new Vue({
			el: '#app',
			data:{
				onelist: [{
					id: "010101020304",
					text: "hello"
				},{
					id: "0202020304",
					text: "ok"
				},{
					id: "0303030405",
					text: "yes"
				}
				]
			}
		})
	</script>

当对数组操作时，并不是所有的修改数组操作 vue 都能与渲染的dom 响应，只有下面几个数组的操作是可以响应的：

push, pop, shift, unshift, splice, sort, reverse.

当然，不想通过上面方法操作数组，也有一种方法，可以响应数组改变，就是改变数组变量的引用地址，app.onelist = [{...},{...}]即可。

对象循环渲染

使用如下：

	<div id="app">
		<div v-for="(item,index) of onelist" :key="item.id">
			{{item.text}} ------ {{index}}
		</div>
		<div v-for="item of oneobject">
			{{item}}
		</div>
		<div v-for="(item,key) of oneobject">
			{{item}} --- {{key}}
		</div>
		<div v-for="(item,key,index) of oneobject">
			{{item}} --- {{key}} --- {{index}}
		</div>
	</div>
	<script>
		var app = new Vue({
			el: '#app',
			data:{
				onelist: [{
					id: "010101020304",
					text: "hello"
				},{
					id: "0202020304",
					text: "ok"
				},{
					id: "0303030405",
					text: "yes"
				}
				],
				oneobject: {
					name: "Tom",
					age: 18,
					gender: "male"
				}
			}
		})
	</script>

如果想修改值，仅赋值修改即可（响应），若增加（删除）则需要更改引用才能响应。

收录于