vue基础教学（5）

最新推荐文章于 2024-06-21 09:47:44 发布

I`ivresse

最新推荐文章于 2024-06-21 09:47:44 发布

阅读量520

点赞数 3

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/Taojia9958/article/details/124973320

版权

一、v-for循环

<body>
		<div id="app">
			<ul>
			<!-- 	<li v-for="item in names">{
  {item}}</li>
				<li v-for="(item,index) in names" :key="index">{
  {item}}--{
  {index}}</li> -->
				<li v-for="(item,key,index) in user" >{
  {key+"-"+item+"-"+index}}</li>
			</ul>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						names: ["zzz", "ttt", "yyy"],
						user: {
							name: "zzz",
							height: 188,
							age: 24
						}
					}
				},
				methods: {

				},
				computed: {

				}
			})
		</script>
	</body>

二、 v-for使用key

	<body>
		<div id="app">
			<ul>
				<li v-for="item in letters">{
  {item}}</li>
			</ul>
			<button @click="add1">没有key</button>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
                       letters:['a','b','c','d','e']
					}
				},
				methods: {
                    add1(){
						this.letters.splice(2,0,'f')
					}
				},
				computed: {

				}
			})
		</script>
	</body>

三、v-for循环key原理

数据-虚拟dom-真实dom 改变数据新的数据-新的虚拟dom-新的真实dom
如果只是单纯的渲染数据完全可以用index作为key 因为他没有改变数据的结构

	<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in title" :key="item.id">{
  {item.name}}--<input type="text"></li>
			</ul>
			<button type="button" @click="add">++</button>
		</div>
		<script src="vue.js"></scr

最低0.47元/天解锁文章

I`ivresse

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue基础教学（5）

一、v-for循环<body> <div id="app"> <ul>  <li v-for="(item,key,index)
复制链接

扫一扫