zoukankan      html  css  js  c++  java
  • v-for遍历数组和对象

    v-for最简单的遍历数组

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <!-- v-for最基础的数组遍历 -->
                <li v-for = 'i in names'>{{i}}</li>
            </ul>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data : {
                    names : ['jack','mary','lucy','jerry']
                }
            }) 
        </script>
    </body>
    </html>

    如果需要索引(下标),添加index即可

                <li v-for = '(i, index) in names'>{{index}}+{{i}}</li>

    v-for遍历对象

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for = '(value,key) in info'>{{key}}----{{value}}</li>
            </ul>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data : {
                    info : {
                        name :'mary',
                        age : 20,
                        gender : 'female'
                    }
                }
            }) 
        </script>
    </body>
    </html>

    也可以用index获取下标,在对象的遍历中比较少用

  • 相关阅读:
    uip UDPclient模式通信移植,p本地ort可以是无规
    正则表达式摘要
    Regular expression
    正则-合乎规则
    通配符-通配
    正则表达式总结
    判断大盘筑顶的方法
    筑顶和下跌规律
    股票的筑顶危险信号
    股票筑顶的基本特征
  • 原文地址:https://www.cnblogs.com/sandraryan/p/13858854.html
Copyright © 2011-2022 走看看