vueswiper 遍历多个图片并且可以触摸滑动 vue怎么遍历

目录

循环遍历

v-for 遍历数组

v-for 遍历对象

组件的 key 属性

检测数组更新

---

循环遍历

v-for 遍历数组

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

我们来看一个简单的案例：

<div id="app">
			<ul>
				<li v-for="movie in movies">{{ movie }}</li>
			</ul>
		</div>	
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					movies : ['功夫','大话西游','逃学威龙'],
					}
				})
		</script>

也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：

<li v-for="movie of movies">{{ movie }}</li>

如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？

v-for 还支持一个可选的第二个参数，即当前项的索引。

<li v-for="(movie, index) in movies">{{ index  + ' - '+ movie }}</li>

 

v-for 遍历对象

v-for 可以遍历对象，比如某个对象中存储着你的个人信息，我们希望以列表的形式显示出来。

<div id="app">
			<ul>
				<li v-for="value in info">{{ value }}</li>
			</ul>
		</div>	
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					info:{
						name: 'stary',
						age: 18,
						height:180
					}
					}
				})
		</script>

可以提供第二个的参数为 property 名称 (也就是键名)：

<li v-for="(value, key) in info">{{key + ' - ' + value }}</li>

还可以用第三个参数作为索引：

<li v-for="(value, key, index) in info">{{index + ' - ' + key + ' - ' + value }}</li>

在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。

 

组件的 key 属性

官方推荐我们在使用 v-for 时，给对应的元素或组件添加上一个:key属性。

由于 Vue 中虚拟 DOM 的 Diff 方法和更新页面的方式，v-for 指令渲染也会存在上面v-if一样的问题，即 input 这样的依赖临时 DOM 状态或子组件状态的元素，需要使用key来绑定使得可以重新渲染：

<li v-for="(value, key, index) in info" :key="key">{{index + ' - ' + key + ' - ' + value }}</li>

key 的作用主要是为了高效的更新虚拟DOM。

不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

 

检测数组更新

因为 Vue 是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。

Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

你可以打开控制台，然后对前面例子的 movies 数组尝试调用变更方法。比如：

app.movies.push('赌神')