Vue v-for使用 vue中循環輸出數據

本文轉載自查看原文 2019-10-06 15:46 3201 vue

v-for的使用:

代碼:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js v-for的使用 </title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div id="ask"><!--vue不能控制body和html的標簽-->
    <table border="1">
        <tr>
            <th>編號</th>
            <th>標題</th>
            <th>出品方</th>
        </tr>
        <tbody>
            <tr v-for="v in list"><!--寫成 v of list 效果是一樣的-->
                <td>{{v.id}}</td>
                <td>{{v.name}}</td>
                <td>{{title}}</td>
            </tr>
        </tbody>
    </table>
    <hr>
    <table border="1">
        <tr>
            <th>序號</th>
            <th>編號</th>
            <th>標題</th>
            <th>出品方</th>
        </tr>
        <tbody>
        <tr v-for="(v,k) in list"><!--寫成 (v,k) of list 效果是一樣的-->
            <td>{{k}}</td>
            <td>{{v.id}}</td>
            <td>{{v.name}}</td>
            <td>{{title}}</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var app = new Vue({
        //element
        el:'#ask',
        data:{
            title:'簡單記錄',
            list:[
                {id:11,name:'vue學習記錄'},
                {id:22,name:'vue學習筆記'}
            ]
        }
    });
</script>
</body>
</html>

免責聲明！

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

猜您在找 vue.js中請求數據v-for循環使用數據 17 vue中v-for循環中key屬性的使用 Vue中的v-for遍歷循環 vue v-for循環 vue v-for循環改變循環數據視圖不更新 Vue：循環遍歷（v-for） vue v-for循環的用法 Vue循環渲染（v-for） Vue 循環遍歷 v-for Vue中v-for的數據分組