使用v-for遍历案例

使用v-for遍历案例

打印九九乘法表

        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8">
                <title></title>
                <style>
                    table,td{
                        border: 2px solid red;
                        border-collapse: collapse;
                        background: beige;
                    }
                </style>
            </head>
            <body>
                <script>
                </script>
                <div id="app">
                    <li v-for="(item,index) in obj" :key="index">
                        {{index}}:{{item}}
                    </li>
                    <li v-for="item in arr">
                        {{item}}
                    </li>
                    <table  >
                        <tr v-for="i in number" :key="i">
                            <td v-for="j in i" :key="j">
                                {{i}}*{{j}}={{i*j}}
                            </td>
                        </tr>
                    </table>
                </div>
                <script src="js/vue.min.js"></script>
                <script>
                    new Vue({
                        el:'#app',
                        data:{
                            obj:{
                                name:'小明',
                                age:18,
                                sex:'男'
                            },
                            // 必须注意格式”：“
                            arr:[
                                "苹果",
                                "香蕉",
                                "草莓"
                            ],
                            number:[1,2,3,4,5,6,7,8,9]
                        },
                        methods:{

                        },
                    })

                </script>
            </body>
        </html>
posted @ 2022-05-19 11:34  爱豆技术部  阅读(52)  评论(0)    收藏  举报