VUE：v-for：遍历数组对象

代码：遍历数组对象{{item}}英文：{{item.ename}}中文：{{item.cname}}索引：{{ind...

aaamoi

5879人浏览 · 2020-02-29 02:07:36

aaamoi · 2020-02-29 02:07:36 发布

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历数组对象</title>
</head>
<body>
    <div id="app"> 
        <ul>
           <!--遍历数组-->
             <li v-for='item in color'> {{item}} </li>
            <li :key='item.id' v-for='(item,index) in myColors'>
            <span>英文：{{item.ename}}</span>
            <br>
            <span>中文：{{item.cname}}</span>
            <br>
            <span>索引：{{index}}</span> </li>
            <!--遍历对象-->
            <li  v-for='(v,k,i) in obj'> {{"属性值:" +v+'--'+ " 键值:" +k+'--'+ " 索引:" +i}} </li> 
    </ul>
    </div>
    <script  type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                color:['red','blue','yellow' ],
                myColors:[{
                        id:1,
                        ename:'red',
                        cname:'红色'
                    },{
                        id:2,
                        ename:'blue',
                        cname:'蓝色'
                    }, {
                        id:3,
                        ename:'yellow',
                        cname:'黄色'
                    }
                ],
                obj:{
                     name:'tom',
                     gender:'男'
                }
            }
        });
    </script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^