vue中遍历数组或对象v-for的使用

下面的示例可直接运行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue for</title>
</head>
<body>

<div id="app">
    <h3>{{ title }}</h3>
    <hr>
    <h4>1.遍历列表</h4>
    <ul>
        <li v-for="value in data.ll">{{ value }}</li>
    </ul>
    <p>带索引的遍历</p>
    <ul>
        <li v-for="value,index in data.ll">index:{{ index }} value:{{ value }}</li>
    </ul>

    <hr>

    <h4>2.遍历对象</h4>
    <p>遍历值value</p>
    <ul>
        <li v-for="value in data.dat">{{ value }}</li>
    </ul>
    <p>遍历key:value</p>
    <ul>
        <li v-for="value,key in data.dat">key:{{key}} value:{{value}}</li>
    </ul>
    <p>遍历key:value:index</p>
    <ul>
        <li v-for="value,key,index in data.dat">index:{{index}} key:{{key}} value:{{value}}</li>
    </ul>

<hr>

    <h4>3.遍历对象列表</h4>
    <ul>
        <li v-for="value,index in data.ls">
            index:{{index}} <br>
            name:{{value.name}} <br>
            age:{{value.age}} <br>
            high:{{value.high}} <br>
            sex:{{value.sex}}
        </li>
    </ul>
    <p>vue中template用于包裹元素，是一个工具标签，不会渲染到页面中。下面代码与上一条示例实现一样的效果。 </p>
    <p>在遍历中，有时要用于判断语句，这时使用template包裹，会更容易操作</p>
    <ul>
        <template v-for="value,index in data.ls">
            <li v-if="index == 1" :title="value.name">
                index:{{index}} <br>
                name:{{value.name}} <br>
                age:{{value.age}} <br>
                high:{{value.high}} <br>
                sex:{{value.sex}}
            </li>
        </template>
       
    </ul>


</div>

    <script type="module">

        import {createApp,reactive} from './vue.esm-browser.js'

        createApp({

            setup(){

            let data = reactive({

                ls:[
                    {'name':'zhangsan','age':35,'high':185,'sex':'man'},
                    {'name':'susan','age':24,'high':168,'sex':'woman'},
                    {'name':'peter','age':54,'high':177,'sex':'man'}
                ],
                dat:{'lenght':20,'weight':50,'hight':36},
                ll:[25,72,37,64]

                })

                return {
                    title:'vue中for使用',
                    data
                }
            }
        }).mount('#app')

    </script>
    
</body>
</html>

学习地址：https://www.bilibili.com/video/BV1nV411Q7RX?p=9&vd_source=ef3d1a56feb9e6a14f1d066d13b1deda
https://www.dengruicode.com/classes_content?uuid=b60f516cdbc64e7a84a52e779955d734

vue中遍历数组或对象v-for的使用

评论已关闭