VUE基础知识4：数组的循环v-for

一、使用v-for循环数据

<div id="app">
    <ul>
        <li v-for="(p, index) in person">{{p.name}} {{index+1}}</li>
    </ul>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            person: [
                {name: '杰克'},
                {name: '罗斯'},
                {name: '迈克'}
            ]
        }
    })
</script>

建议使用 in

二、使用v-for循环二维数组

<div id="app">
    <ul>
        <li v-for="(p, index) in person">
            {{p.name}} {{index+1}}

            <ul>
                <li v-for="(c,cIndex) in p.color">{{c}} {{index+1}}.{{cIndex+1}}</li>
            </ul>
        </li>
    </ul>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            person: [
                {name: '杰克', color: ['green', 'yellow']},
                {name: '罗斯', color: ['red', 'blue']},
                {name: '迈克', color: ['yellow', 'pink']}
            ]
        }
    })
</script>

还有一些循环字符串，或者循环次数的

<div v-for="c in 'aaaa'">{{c}}</div>
<div v-for="c in 30">{{c}}</div>

三、使用v-for循环对象

<div v-for="(value, key, index) in obj">{{value}} {{key}} {{index+1}}</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            obj: {name:'xxx', age:9, address: 'xxx'}
        }
    })
</script>

value是值， key是键名， index是索引。

四、事件

在vue里面绑定事件使用 v-on:click="" , v-on:mouseover=""，可以把v-on: 变成 @， @click="fn1"

建议使用 @click=""

<div id="app">
    <div v-on:click="fn1">点我啊</div>
    <div @click="fn1">点我啊</div>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello'
        },
        methods: {
            // 这里面不能用箭头函数，因为箭头函数里面的this会指向window， 所以不能用箭头函数
            fn1() {
                alert(1);
                alert(this.msg);
                console.log(this); // this 指的都是根实例vm
            }
        }
    })
</script>

五、在事件中传参

<div id="app">
    <div @click="fn1($event, 1)">点我啊</div>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello'
        },
        methods: {
            // 这里面不能用箭头函数，因为箭头函数里面的this会指向window， 所以不能用箭头函数
            fn1(event, a) {
                alert(1);
                alert(this.msg);
                console.log(this); // this 指的都是根实例vm

                console.log(event);  // 事件对象
                console.log(a);      // 1
            }
        }
    })
</script>

如果不传递参数，则不要写括号，会自动传入事件源。

如果写括号了，要手动传入 $event属性。

六、简易todo

<div id="app">
    <input type="text" v-model="val" @keyup="add" />
    <!-- 或者使用修饰符 @keyup.13 或者 @keyup.enter , 当按回车的时候执行add方法 -->
    <!-- @keyup.ctrl.enter 就是按住 ctrl加enter 按键才执行 -->
    <input type="text" v-model="val" @keyup.enter="add" />
    <ul>
        <li v-for="(a,index) in arr">{{a}}
            <button @click="remove(index)">删除</button>
        </li>
    </ul>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            arr: [],
            val: '',
        },
        methods: {
            add(e) {
                // 如果按回车键
                if (e.keyCode === 13) {
                    this.arr.unshift(this.val);
                    this.val = '';
                }
            },
            remove(i) {
                // 把索引相同的删除掉。  索引不相等的才留下。
                this.arr = this.arr.filter((item, index) => index !== i)
            }
        }
    })
</script>

VUE基础知识4：数组的循环v-for

猜你喜欢