Vue3.x 系列基础指令 v-for数据列表

v-for 循环

v-for 指令的表达式可以使用of替代in 作为分隔符

v-for 还支持一个可选参数作为当前项的索引

格式如下：

<li v-for="(book,index) in books">{{index}} - {{book.title}} </li>

v-for循环示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <ul>
     <li v-for="book in books">{{book.title}}</li>
   </ul>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const vm  = Vue.createApp({
        data(){
            return {
                books:[
                    {title:'PHP从入门到精通'},
                    {title:'C++从入门到精通'},
                    {title:'MySQL从入门到精通'}
                ]
            }
        }
    }).mount("#app");
</script>
</body>
</html>

世上最好的保鲜就是不断进步，让自己成为一个更好和更值得爱的人。

Vue3.x 系列基础指令 v-for数据列表

评论

相关文章