Vue 基本列表


v-for:用於展示列表數據

寫法:v-for="(item,index) in xxx" :key="yyy"

可遍歷:數組、對象、字符串(用的少)、指定次數(用的少)


實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本列表</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <ul>
        <!--  遍歷數組  -->
        <h3>遍歷數組</h3>
        <li v-for="(p,index) in persons" :key="index">
            {{p.name}} - {{p.age}}
        </li>

        <!--  遍歷對象  -->
        <h3>遍歷對象</h3>
        <li v-for="(value,k) in car" :key="k">
            {{k}} - {{value}}
        </li>

        <!--  遍歷字符串(用的少)  -->
        <h3>遍歷字符串</h3>
        <li v-for="(char,index) in str" :key="index">
            {{index}} - {{char}}
        </li>

        <!--  遍歷指定次數(用的少)  -->
        <h3>遍歷指定次數</h3>
        <li v-for="(number,index) in 5" :key="index">
            {{index}} - {{number}}
        </li>
    </ul>
</div>
</body>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            persons: [
                {id: '001', name: '張三', age: 18},
                {id: '002', name: '李四', age: 20},
                {id: '003', name: '王五', age: 19},
            ],
            car: {
                name: '奧迪',
                price: '70萬',
                color: '白色'
            },
            str: 'Hello'
        }
    })
</script>
</html>



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM