Vue中v-for和v-model结合遍历数组,数组对象,对象,迭代数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue-2.4.0 .js"></script>
    <title>Document</title>
</head>
<body>
        <!-- 通过v-for遍历普通数组,对象数组,对象,迭代数字 -->
        <div class="for">
            <!-- ()里面的i可写可不写,()可有可无 -->
            <p v-for="(arr, i) in array" style="color: blueviolet;">遍历普通数组:序号为{{i}},数字为:{{arr}}</p>        
            <p v-for="user in objectArray" style="color: brown;">遍历对象数组:序号为:{{ user.num }},姓名为:{{ user.name }}</p>
            <p v-for="(val, key, id) in Object" style="color: chartreuse;">遍历对象:{{ key }}----{{ val }}</p>
            <p v-for="num in 3">遍历数字:{{ num }}</p>
        </div>
        <script>
            var fn5 = new Vue({
                el: '.for',
                data: {
                    array: [1,2,3],
                    objectArray: [{num: 1, name: '严凯',}, {num: 2, name: '苗苗'}],
                    Object: { id: 0, name: 'CR7', gender: 'man'},
                },
                methods:{
    
                }
            })
        </script>
    
        <!-- v-for 和 v-model结合 -->
        <div class="lianxi">
            <div>
                <input type="text" v-model="id">
                <input type="text" v-model="name">
                <input type="button" value="添加" @click='adds'>
            </div>
            
            <div>
                <p v-for="users in person">
                    <input type="checkbox">{{users.id}} {{users.name}}
                </p>
            </div>
        </div>
        <script>
            var fn6 = new Vue({
                el: '.lianxi',
                id: '',
                name: '',
                data: {
                    person: [
                        {id: 0, name: '张三'},
                        {id: 1, name: '李四'},
                        {id: 2, name: '赵四'},
                        {id: 3, name: '王五'},
                    ]
                },
                methods:{
                    adds() {
                        this.person.push({id: this.id, name: this.name})
                    }
                }
            })
        </script>
</body>
</html>

Vue中v-for和v-model结合遍历数组,数组对象,对象,迭代数字_第1张图片

你可能感兴趣的:(Vue基础部分,vue.js)