vue.js中的列表渲染（循环渲染）（v-for）

来源：互联网发布：it was 编辑：程序博客网时间：2024/05/17 00:52

1、用 v-for 把一个数组对应为一组元素,用 v-for指令根据一组数组的选项列表进行渲染，简单的说就是循环使用v-for。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

 <!-- 使用v-for进行循环渲染 -->    <div id="app">        <ul>            <li v-for="item in items">                {{item.name}}            </li>        </ul>    </div>    <script>        new Vue({           el:"#app",           data:{            items:[                {name:"pangtong"},                {name:"yantong"},                {name:"xiaotong"}            ]           }         })    </script>

2、v-for迭代对象，v-for可以通过一个对象的属性来迭代对象，也可以提供第二个参数是键名，第三个参数是索引

 <!-- v-for迭代对象 -->    <div id="app">        <ul>            <li v-for="value in object">                {{value}}            </li>        </ul>    </div>    <script>        new Vue({            el:"#app",            data:{                object:{                    name:"pangtong",                    sex:"女"                }            }        })    </script>

<!-- v-for迭代对象,也可以提供第二个参数是键名-->    <div id="app">        <ul>            <li v-for="(value,key) in object">                {{key}}-{{value}}            </li>        </ul>    </div>    <script>        new Vue({            el:"#app",            data:{                object:{                    name:"pangtong",                    sex:"女"                }            }        })    </script>

<!-- v-for迭代对象,也可以提供第二个参数是键名，第三个参数是索引-->    <div id="app">        <ul>            <li v-for="(value,key,index) in object">                {{index}}-{{key}}-{{value}}            </li>        </ul>    </div>    <script>        new Vue({            el:"#app",            data:{                object:{                    name:"pangtong",                    sex:"女"                }            }        })    </script>

3、v-for也可以迭代整数

 <!-- v-for也可以迭代整数 -->    <div id="app">        <ul>            <li v-for="n in 10">                {{n}}            </li>        </ul>    </div>    <script>        new Vue({            el:"#app"        })    </script>

4、v-for还可以循环数组

<!-- v-for还可以循环数组 -->    <div id="app">        <ul>            <li v-for="n in [1,3,5,6]">                {{n}}            </li>        </ul>    </div>    <script>        new Vue({            el:"#app",        })    </script>

5、v-for 如果要迫使其重新排序的元素，需要提供一个 key 的特殊属性

eg:<div v-for="item in items" :key="item.id">{{ item.text }}</div>

阅读全文

0 0