Vue组件库Element

目录

        1.循环遍历

        2.v-for遍历整形变量（99乘法表）

        3.v-for遍历普通数组

        4.v-for遍历数组对象

1.循环遍历

v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：

  v-for=”item in list”

  list 是一个数组， item 是当前被遍历的对象 

  在数组进行遍历时，我们必须给遍历对象绑定一个对应的 key 值以保证对象的唯一性

  使用 v-bind:key 指令进行绑定

v-for 中key的作用

2.v-for遍历整形变量（99乘法表）

<h3 align="center">九九乘法表</h3>
<hr>
<table align="center" border="1">
    <tr v-for="i in 9" :key="i">
        <td v-for="j in i" :key="j">{{j}}*{{i}}={{i*j}}</td>
    </tr>
</table>

3.v-for遍历普通数组

<template>
    <div>
        <h2 align="center">for语句的使用方法讲解</h2>
        <hr>
        <h4 align="left">
        <pre>
            v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：
            v-for=”item in list”
            list是一个数组，item是当前被遍历的对象

            在数组进行遍历时，我们必须给遍历对象绑定一个对应的key值以保证对象的唯一性
            使用v-bind:key指令进行绑定

        </pre>
        <ul>
            <li v-for="item in weeks" :key='item'>{{item}}</li>
        </ul>

    </div>
</template>
<script>

export default({
    name: 'ForDemo',
    data(){
        return {
            weeks:[
                "星期一",
                "星期二",
                "星期三",
                "星期四",
                "星期五",
                "星期六",
                "星期日"
            ]
        }
    }
})
</script>

  4.v-for遍历数组对象

<template>
    <div>
        <h2 align="center">for语句的使用方法讲解</h2>
        <hr>
        <h3 align="center">员工资料列表</h3>
        <table align="center" width="800px" border="1">
            <thead>
                <tr>
                    <th>员工ID</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tr v-for="row in empList" :key="row.empId">
                <td>{{row.empId}}</td>
                <td>{{row.name}}</td>
                <td>{{row.sex}}</td>
                <td>{{row.age}}</td>
            </tr>

        </table>

    </div>
</template>
<script>

export default({
    name: 'For',
    data(){
        return {
            empList:[
                {empId:1,name:'张三',sex:'男',age:'18'},
                {empId:2,name:'李四',sex:'男',age:'28'},
                {empId:3,name:'丽丽',sex:'女',age:'38'},
                {empId:4,name:'晓晓',sex:'女',age:'16'},
                {empId:5,name:'张三丰',sex:'男',age:'48'}
            ]
        }
    }
})
</script>

案例完整代码如下

<template>
    <div>
        <h2 align="center">for语句的使用方法讲解</h2>
        <hr>
        <h4 align="left">
        <pre>
            v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：
            v-for=”item in list”
            list是一个数组，item是当前被遍历的对象

            在数组进行遍历时，我们必须给遍历对象绑定一个对应的key值以保证对象的唯一性
            使用v-bind:key指令进行绑定

        </pre>
        </h4>
        <ul>
            <li v-for="item in weeks" :key='item'>{{item}}</li>
        </ul>
        <h3 align="center">九九乘法表</h3>
        <hr>
        <table align="center" border="1">
            <tr v-for="i in 9" :key="i">
                <td v-for="j in i" :key="j">{{j}}*{{i}}={{i*j}}</td>
            </tr>
        </table>
        <h3 align="center">员工资料列表</h3>
        <table align="center" width="800px" border="1">
            <thead>
                <tr>
                    <th>员工ID</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tr v-for="row in empList" :key="row.empId">
                <td>{{row.empId}}</td>
                <td>{{row.name}}</td>
                <td>{{row.sex}}</td>
                <td>{{row.age}}</td>
            </tr>

        </table>

    </div>
</template>
<script>

export default({
    name: 'For',
    data(){
        return {
            weeks:[
                "星期一",
                "星期二",
                "星期三",
                "星期四",
                "星期五",
                "星期六",
                "星期日"
            ],
            empList:[
                {empId:1,name:'张三',sex:'男',age:'18'},
                {empId:2,name:'李四',sex:'男',age:'28'},
                {empId:3,name:'丽丽',sex:'女',age:'38'},
                {empId:4,name:'晓晓',sex:'女',age:'16'},
                {empId:5,name:'张三丰',sex:'男',age:'48'}
            ]
        }
    }
})
</script>

本人从事软件项目开发20多年，2005年开始从事Java工程师系列课程的教学工作，录制50多门精品视频课程，包含java基础，jspweb开发，SSH,SSM，SpringBoot，SpringCloud,人工智能，在线支付等众多商业项目，每门课程都包含有项目实战，上课PPT，及完整的源代码下载，有兴趣的朋友可以看看我的在线课堂

讲师课堂链接：https://edu.csdn.net/lecturer/893