vue 列表渲染 v-for

最新推荐文章于 2024-09-28 15:43:20 发布

春疯得意

最新推荐文章于 2024-09-28 15:43:20 发布

阅读量1.1k

点赞数

分类专栏： vue javascript ECMAScript 6

本文链接：https://blog.youkuaiyun.com/zj1206358260/article/details/94399707

版权

javascript 同时被 3 个专栏收录

3 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

ECMAScript 6

2 篇文章

订阅专栏

本文详细介绍了Vue.js中的v-for指令如何用于遍历数组和对象。重点在于，Vue重写了数组的一些方法，以确保在内部数据变化时能够自动更新视图。通过对数组方法的拦截，Vue确保了数据变化的同步更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-for 遍历数组
v-for 指令：vue 本身只是监视了 list 的改变，没有监视数组内部数据的变化，vue 重写了数组中的一系列改变数组内部数据的方法（先条用原生，再更新界面）

<html>
    <header>
        <meta charset="uft-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title>v-for</title>
    </header>

    <script >
        window.onload = function(){
			//vue 本身只是监视了 list 的改变，没有监视数组内部数据的变化
			//vue 重写了数组中的一系列改变数组内部数据的方法（先条用原生，再更新界面）
            new Vue({
                el:"#one",
                data: {
                    list:[{name:'zhou',age:22},{name:'zhang',age:23},{name:'tom',age:22},{name:'alice',age:22}]
                },
                methods: {
					deleteP(index){
						this.list.splice(index,1) //vue重写了数组的 splice 方法会更新界面 
						console.log(this.list)
					},
					updateP(index,newP){
						//this.list[index]=newP //数组内部数据发生了变化，但是界面没有更新
						this.list.splice(index,1,newP) //更新，界面更新
						this.list.splice(index,0,newP) //增加，界面更新
						console.log(this.list)
					}
                }
            });
        }
    </script>

    <body>
        <div id="one">
            <ul>
                <li v-for="(item,index) in list">
					{{item}}--{{item.name}}:{{item.age}}:{{index}}
					----<button @click="deleteP(index)">删除</button>
					----<button @click="updateP(index,{name:'xie',age:33})">更新</button>
				</li>
            </ul>  
        </div>
    </body>
</html>

v-for 遍历对象

<html>
    <header>
        <meta charset="uft-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title>v-for</title>
    </header>

    <script >
        window.onload = function(){
			//vue 本身只是监视了 list 的改变，没有监视数组内部数据的变化
			//vue 重写了数组中的一系列改变数组内部数据的方法（先条用原生，再更新界面）
            new Vue({
                el:"#one",
                data: {
                    person:{name:'zhou',age:22}
                },
                methods: {
                }
            });
        }
    </script>

    <body>
        <div id="one">
            <ul>
                <li v-for="(item,index) in person">
					{{item}}:{{index}}
				</li>
            </ul>  
        </div>
    </body>
</html>