Vue学习（六）——v-for指令_v-for如何只循环不拿值

作者：2023面试高手 | 2024-02-11 19:51:04

踩

v-for如何只循环不拿值

v-for可以循环数组也可以循环对象


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
 
<body>
    <div id="jdg">
        <ul>
            <li v-for="(items,idx) in array">下标：{{idx}}——值：{{items}}</li>
        </ul>
        <ul>
            <li v-for="(value,key,idx) in obj">下标：{{idx}}——键：{{key}}——值：{{value}}</li>
        </ul>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#jdg',
            data: {
                array:['TES','JDG','SN','LGD'],
                obj:{
                    name:'tbw',
                    age:19,
                    lover:'NO',
                    lovingthings:'basketball'
                }
            },
            computed: {
            },
            methods: {
            }
        })
    </script>
</body>
 
</html>

对于数组循环来说，（items,idx）in array，这条循环语句items可以获得数组中的值，idx可以获得下标。

对于对象循环来说，(value,key,idx) in obj，这样可以获得对象数组，value值，key键，idx下标。

我们在使用v-for指令时，需要绑定一个:key属性，这个属性一般绑定items值，比如我们在插入元素时，由于vue底层的虚拟DOM，会把插入节点往后的节点都一步一步的更新，效率很低，所以我们绑定一个key属性，就可以方便虚拟DOM更加高效的更新。注意：我们在绑定key时，一定要保证是唯一的，不绑定下标是为了防止插入元素之后其他元素下标改变导致效率变慢。

页面响应式的操作：

1.数组push，向最后一位插入元素，注意如果插入了相同的元素，并且还绑定了items，就会被浏览器报错

2.数组pop，删除数组最后一个元素

3.数组shift，删除数组第一个元素

4.数组unshift，向数组的最前面添加元素

5.数组splice删除元素/插入元素/替换元素，第一个参数是操作的起始位置下标，第二个参数是需要删除元素的个数，如果不传，就会把从起始位置之后的元素全部删除，第三及以后的参数就是执行完删除操作之后，向数组末尾添加这些参数。

6.数组sort，数组排序

7.数组reverse，数组翻转

页面非响应式操作：

通过下标修改数组中的值，这一操作是非响应式的，如果需要响应操作，那么我们可以使用splice，或者通过Vue对象调用set（Vue.set(要修改的对象,索引值,修改后的值)）。

以下是一个实践例题，点击哪一个li，哪一个li就变成红色。


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            color: red;
        }
    </style>
</head>
 
<body>
    <div id="jdg">
        <ul>
            <li v-for="(items,idx) in array" @click="beRed(idx)" :class="{active:boolArr[idx]}">{{items}}</li>
        </ul>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#jdg',
            data: {
                array:['TES','JDG','SN','LGD'],
                boolArr:[false,false,false,false]
            },
            computed: {
            },
            methods: {
                beRed(idx){
                    let new_Bool=this.boolArr[idx]?false:true;
                    this.boolArr.splice(idx,1,new_Bool);
                }
            }
        })
    </script>
</body>
 
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/76730