vue中数组的使用

最新推荐文章于 2022-03-12 11:34:57 发布

LJ君

最新推荐文章于 2022-03-12 11:34:57 发布

阅读量1.3k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_45068048/article/details/113729814

版权

1.数组的遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    遍历数组-->
    <ul>
<!--        遍历使用-->
        <li v-for="item in names">{{item}}</li>
    </ul>
    <ul>
        <li v-for="(item,index) in names">下标是：{{index}}---{{item}}</li>
    </ul>
<!--    遍历数组对象-->
    <ul>
        <li v-for="item in info">
            {{item.name}}
        </li>
    </ul>
<!--    遍历对象-->
<!--    遍历对象的过程中 获取一个值 获取到的是value-->
    <ul>
<!--        key 是唯一属性 最好不要用数组下标 建议与for循环共同使用-->
        <li v-for="item in goods" ：key="item">
            {{item}}
        </li>
    </ul>
    <ul>
        <li v-for="(value,key) in goods">
          key是：  {{key}} ，value是：{{value}}
        </li>
    </ul>
</div>
<script src="../../lib/vue-2.4.0.js"></script>
<script>
    const app=new Vue({
        el: "#app",
        data:{
            // 数组
            names:["java","php","mysql"],
            // 数组对象
            info:[{name:'java',price:255},
                {name:'php',price: 245},
                {name:'anzhu',price: 55}
            ],
            // 对象
            goods:{name:"zhangsan",age:22,sex:'man'}
        },
        methods:({

        })
    })
</script>
</body>
</html>

总结：遍历数组
v-for=“item in items” 遍历出数组的每个元素
v-for="(item , index) in items" 遍历数组中的每个元素item，index表示下标
v-for=“item in items” 对象中的属性用 item.属性
：key 表示唯一标识符
遍历对象：v-for="(value,key) in goods" value 是内容 key 表示键值
2.数组的相关操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="push1">push添加最后一个元素</button>
    <button @click="pop1">pop删除最后一个元素</button>
    <button @click="shift1">shift删除第一个元素</button>
    <button @click="unshift1">unshift添加第一个元素</button>
    <button @click="splice1">splice</button>
    <button @click="sort1">sort函数进行排序</button>
    <button @click="reverse1">reserve 颠倒</button>
</div>
<script src="../../lib/vue-2.4.0.js"></script>
<script>
    const app=new Vue({
        el: "#app",
        data:{
            letters:['a','b','c','d']
        },
        methods:({
            //在数组后面添加元素
          push1(){
              this.letters.push('f');
          },
            //删除最后的元素
            pop1(){
              this.letters.pop()
            },
            //shift 删除第一个元素
            shift1(){
              this.letters.shift();
            },
            //unshift添加第一个元素
            unshift1(){
              this.letters.unshift(1);
              //可以写多个参数
            },
            // splice 功能是  添加 修改  删除
            // 第一个参数是开始的位置上
            // 第二个参数是添加（参数写0） 删除 修改的个数
            // 没有参数删除后面所有
            splice1(){
              // this.letters.splice(1)
              //  this.letters.splice(1,2)
              //  this.letters.splice(1,2,'e','f')
                this.letters.splice(1,0,'1','2')
            },
            //sort函数进行排序
            sort1(){
              this.letters.sort();
            },
            //reserve 颠倒
            reverse1(){
               this.letters.reverse();
            }
        })
    })
</script>
</body>
</html>

总结：
1.在数组最后面添加（push），在数组后面删除（pop）
2.在数组最前面添加（unshift），在数组最前面删除（shift）
3 splice 功能是添加修改删除
第一个参数是开始的位置上
第二个参数是添加（参数写0）删除修改的个数没有参数删除后面所有
第三参数是添加的内容或者是修改的内容
4.sort进行排序
5.revese 颠倒