Vue

Vue列表渲染

2021年7月2日 /

一 什么是列表渲染

其实就是写一个for循环。

二 官网样例程序

1 新建1个HTML文件
2 引入Vue.js
3 写一个div，id指定为example-1
4 JavaScript里定义Vue实例
5 在div里写一个列表
6 div列表中用v-for读取实例中定义的数组

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>列表渲染</title>
        <script  src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js" type="text/javascript">

        </script>
    </head>
    <body>

        <ul id="example-1">
            <li v-for="item in items" :key="item.message">
                {{ item.message }}
            </li>
        </ul>

        <script type="text/javascript"> 
        let example=new Vue({
            el:"#example-1",
            data:{
                items:[
                    {message:"Foo"},
                    {message:"Bar"}
                ]
            }
        })
        </script>

    </body>
</html>

三 v-for中访问父作用域的property

这里，使用了另外一个参数index作为当前对象的索引

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>列表渲染</title>
        <script  src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js" type="text/javascript">

        </script>
    </head>
    <body>

        <ul id="example-1">
            <li v-for="item in items" :key="item.message">
                {{ item.message }}
            </li>
        </ul>

        <hr>

        <ul id="example-2">
            <li v-for="(item,index) in items2">
                {{parentMessage}}---{{index}}---{{item.message}}
            </li>

        </ul>

        <script type="text/javascript"> 
        let example=new Vue({
            el:"#example-1",
            data:{
                items:[
                    {message:"Foo"},
                    {message:"Bar"}
                ]
            }
        })

        let example2=new Vue({
            el:"#example-2",
            data:{
                parentMessage:'Parent',
                items2:[
                    {message:'foo'},
                    {message:'bar'}
                ]
            }
        })
        </script>

    </body>
</html>
//结果
Parent---0---foo
Parent---1---bar

四 v-for里使用对象

Post Views: 1,643

留言