vue02_列表显示(v-for)_vue2 v-for表单-优快云博客

本文链接：https://blog.youkuaiyun.com/Abdullahi_kanye/article/details/103003000

一、代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
           <!-- 下面已经将div标签挂载在vue中了，当它看见有v-for的时候，就回去解析它 -->
           <!-- v-for:遍历。将movies中的数据遍历依次取出来放到定义的item变量中去，然后vue实例就会解析变量后展示在前台 -->
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>
        <!--没有将div标签挂载到vue实例中的，就不会去解析div标签-->
    <div>
        <ul>
            <li v-for>{{movies[0]}}</li>
        </ul>
    </div>

    <!-- 先引用vuejs文件 -->
    <script src="../js/vue.js"></script>

    <!-- vue实例。传对象类型的参数，用的就是{},里面就可以写对象类型的参数 -->
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                //定义数组形式的数据
                movies:['海贼王','火影','死神','进击的巨人']
            }
        })
    </script>
</body>
</html>