Vue v-for操作對象與數值

本文轉載自查看原文 2019-10-06 15:47 1227 vue

<!doctype html>
<html lang="en">
<head id="head">
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <title>{{title}} </title>
</head>
<body>
<div id="ask"><!--vue不能控制body和html的標簽-->
    <!--vue操作對象-->
    <table border="1">
        <tr>
            <th>序號</th>
            <th>屬性</th>
            <th>值</th>
        </tr>
        <tbody>
            <tr v-for="(v,k,i) in list">
                <td>{{i}}</td>
                <td>{{k}}</td>
                <td>{{v}}</td>
            </tr>
        </tbody>
    </table>
    <hr>
    <!--vue操作數值-->
    <table border="1" width="100%">
        <tr v-for="v in 20">
            <td>{{v}}</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var vue = function (options){new Vue(options)};
    vue({
        el:'#head',
        data:{
            title:'Vue v-for操作對象與數值'
        }
    });
    var app = vue({
        //element
        el:'#ask',
        data:{
            list:{
                title:'簡單記錄',
                url:'#',
                domain:'#'
            }
        }
    });

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

免責聲明！

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

猜您在找 vue v-for遍歷對象 Vue的v-for遍歷操作 JS操作對象 JavaQuery操作對象 15 vue 的v-for 循環對象 vue中v-for數組和對象的循環 vue 中 v-for 遍歷對象 vue使用v-for遍歷Map對象 Vue v-for操作與computed結合功能 Vue-v-bind、v-for、v-if等基本操作