vue指令之v-for指令

时间：2021-01-24 01:18:57 收藏：0 阅读：14

作用：根据一组数组或对象的选项列表进行渲染。

语法：

情况1：v-for="当前循环到的元素 in 待循环的数据" :key="唯一值"

情况2：v-for="(当前循环到的元素,当前的索引) in 待循环的数据" :key="索引"

vue中，循环的时候，key属性加不加不会报错，只是为了提高页面的渲染性能。（建议加）

在vue工程化（做vue项目）的时候，虽然vue不会报错，但是编辑器会报错

react中，循环的时候，key属性也是为了提高渲染性能，但是不加会报错。

细节：key的作用，提高性能，不影响显示效果（如果没有id，可以考虑使用索引替代），切记key的值不能重复，只要遵循不重复的原则即可，值是什么无所谓。

v-for指令可对数组、对象进行遍历，也可以对数字、字符串进行遍历。

对数字继续遍历的时候，数字只能是正整数，不能输小数和负数。

对字符串进行遍历的时候每一个都是一个字符，字符串里面可以是中文

使用v-for遍历对象的时候，item表示属性值，key是属性名称，item 是第一个值，key是第二个值，index是第三个值，表示序号

当循环中，如果数据是数组，对数据进行删除操作的时候，删除掉这一项后面的数据会重新进行渲染，避免重新渲染，将数据设置成数组，数组里面包含对象的形式，给每一个对象设置一个唯一的值，并且在循环的后面添加v-bind，只是唯一的值。

    <div id=‘app‘>
        <!-- 对数组进行遍历 -->
        <ul>
            <li v-for="(item,index) in arr">
                索引是 {{index}}  对应的值是 {{item}}
            </li>
        </ul>
        <!-- 对对象进行遍历 -->
        <ul>
            <li v-for="(value,key,index) in obj">序号{{index}} 属性名称是 {{key}} 值是{{value}} </li>
        </ul>
        <!-- 对数字进行遍历 -->
       <p> <i v-for=‘item in 6‘> {{item}} </i></p>
       <!-- 对字符进行遍历 -->
       <ul><li v-for="item in str1"> {{item}} </li></ul>
       <ul><li v-for="item in str2"> {{item}} </li> </ul>
    </div>
</body>
<script src=‘https://cdn.jsdelivr.net/npm/vue/dist/vue.js‘></script>
<script>
    new Vue({
        el: ‘#app‘,
        data: {
            arr:[‘第一个‘,‘第二个‘,‘第三个‘,‘第四个‘],
            obj:{
                name:‘xm‘,
                age:18,
                gen:‘男‘,
            },
            str1:‘sedfgv‘,
            str2:‘不能他不要慌v‘
        },
         })
</script>

原文：https://www.cnblogs.com/fedream/p/14318752.html