Vue循环数组和对象（六）

最新推荐文章于 2024-06-05 14:26:44 发布

Java语录精选

最新推荐文章于 2024-06-05 14:26:44 发布

阅读量305

点赞数 1

文章标签： vue java js

本文链接：https://blog.csdn.net/weixin_44716935/article/details/112688292

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.循环数组二种方式
获取item数据

v-for="item in message"

获取item数据和index索引

v-for="(item,index) in message"

2.获取对象value数据 key属性名 index 索引

v-for="(value,key,index) in info"

for循环加 :key = "数据" 在修改可以保持性能利用。绑定key数据没修改先显示，当修改了会在原来的位置插入

3.数组响应方法，页面跟着改变

推荐push 和 pop 数组未操作效率高

push（）数组最后添加
pop（）删除最后一个元素
shift（）删除第一个元素
unshift（）前面添加元素
sort（）排序
reverse（）删除
Vue.set() 全局修改
splice（）删增替换方法，关键第二个元素

 全部删除
this.message.splice(0);
替换前三个元素
this.message.splice(0,3,'000','000','000')
增加元素
this.message.splice(1,0,'555')
排序
this.message.sort()

4.不是响应操作
data里面的数据改变，页面没有变化

 this.message[0] = '000';

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in message" :key="item">{{item}}</li>
    </ul>
    <ul>
        <li v-for="(item,index) in message">{{item + '-'+ index}}</li>
    </ul>
    <button @click="add">数组添加</button>
    <br />
    <ul>
        <li v-for="(value,key,index) in info" :key="value">
            数据：{{value}}
            属性名: {{key}}
            索引: {{index}}
        </li>
    </ul>
</div>
</body>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            // 遍历数组和对象
            message: ['111', '222', '333'],
            info: {
                id: 1,
                name: 'bo',
                age: 18,
            }
        },
        methods: {
            add() {
                // this.message.push('444')
                // 通过索引修改元素，不会改变界面
                this.message[0] = '000';
                // 全部删除
                // this.message.splice(0);
                // 替换前三个元素
                // this.message.splice(0,3,'000','000','000')
                //增加元素
                // this.message.splice(1,0,'555')
                // 排序
                // this.message.sort()
            }
        }
    })
</script>
</html>

在这里插入图片描述

Java语录精选

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue循环数组和对象（六）

1.循环数组二种方式获取item数据v-for="item in message"获取item数据和index索引v-for="(item,index) in message"2.获取对象value数据 key属性名 index 索引v-for="(value,key,index) in info"for循环加 :key = "数据" 在修改可以保持性能利用。绑定key数据没修改先显示，当修改了会在原来的位置插入3.数组响应方法，页面跟着改变推荐push 和 pop 数组未操作效率高
复制链接

扫一扫