vue -v-for

YANG-Live

已于 2022-02-13 19:17:40 修改

阅读量353

点赞数

分类专栏： vue JavaScript 文章标签： vue.js 前端 javascript

于 2022-02-13 19:10:38 首次发布

本文链接：https://blog.csdn.net/qq_38567182/article/details/122912544

版权

JavaScript 同时被 2 个专栏收录

10 篇文章 2 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

1、v-for循环普通数组
①创建vue对象
在这里插入图片描述
② 循环数据

在这里插入图片描述

结果：

在这里插入图片描述
2、v-for循环对象数组
① 创建vue实例对象

在这里插入图片描述
② 循环对象数组

在这里插入图片描述结果：

在这里插入图片描述
3、v-for循环对象
①创建vue对象实例

②循环对象

在这里插入图片描述结果：

4、v-for循环数字
①创建vue对象实例

②循环数字

在这里插入图片描述

结果

在这里插入图片描述

5、v-for中key的使用方式
①创建vue对象实例
注意：push()方法一般是添加到数组的最后的位置；unshift()方法是往最前面的位置添加。

在这里插入图片描述
②循环

注意：

v-for循环的时候，key属性只能使用number或String。
key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值。
在组件中使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字类型 :key值。

在这里插入图片描述
结果

在这里插入图片描述
demo

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="vueapp4">
        <ul v-if="seen">
            <li v-for="item,index in items" :key="index">
                {{index}}-{{item.massge}}:{{item.jiage}}
            </li>
        </ul>
        <br />
        <table border="5" align="center" width="400"bordercolor="red">
            <tr v-for="item,index in items" :key="index">
                <td v-text="index"></td>
                <td v-text="item.massge"></td>
                <td v-text="item.jiage"></td>
            </tr>
        </table>
        <table border="5" align="center" width="400"bordercolor="red">
            <tr v-for="item,index in items" :key="index">
                <td v-for="(value,key,index) in item">{{value}}</td>
            </tr>
        </table>
        <ul>
            <li v-for="value,key in vaulekeyitem" :key="key">
                {{key}}:{{value}}
            </li>
        </ul>
    </div>
</body>

</html>

<script type="text/javascript">
    var data = [
        {id:1, massge: "水果", jiage: "19.9" },
        {id:2, massge: "蔬菜", jiage: "13.9" },
        {id:3, massge: "服装", jiage: "15.9" }
    ];
    var list = {
        shuiguo: "水果",
        shucai: "蔬菜",
        fuzhuang: "服装"
    };

    //v-for 循环 items没有键 ；vaulekeyitem键值对,可用于下来列表 下拉项循环
    var deom4 = new Vue({
        el: "#vueapp4",
        data: {
            seen: true,
            /*items: [
                { massge: "水果", jiage: "19.9" },
                { massge: "蔬菜", jiage: "13.9" },
                { massge: "服装", jiage: "15.9" }
            ],
            vaulekeyitem: {
                shuiguo: "水果",
                shucai: "蔬菜",
                fuzhuang: "服装"
            }*/
            items:data,
            vaulekeyitem:list
        }
    });
</script>