Vue中的列表渲染

最新推荐文章于 2022-07-28 12:16:48 发布

要不要吃烤肉

最新推荐文章于 2022-07-28 12:16:48 发布

阅读量182

点赞数

分类专栏：前端学习文章标签： vue

本文链接：https://blog.csdn.net/Smart_J_King/article/details/108539597

版权

前端学习专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中的列表渲染</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 数组循环 -->
        <!-- 循环输出数组的每一项内容 -->
        <!-- <div v-for="item of fruit">{{item}}</div> -->

        <!-- 循环输出数组的每项内容以及其在数组中的下标 -->
        <!-- <div v-for="(item, index) of fruit">{{index}} . {{item}}</div> -->

        <!-- 为了提升循环显示的性能，会给每个循环项加一个唯一的key值 -->
        <!-- key值最好不要设置为index值，，在频繁操作DOM元素的时候，可能会影响性能，可能会让Vue没发充分的复用DOM节点 -->
        <!-- 可以使用数组的唯一条目符，如数据的唯一id标识 -->
        <!-- <div v-for="(item, index) of fruits" 
             :key="item.id">
             {{index}} . {{item.value}}
        </div> -->
      
        <!-- 当多标签需要使用同一组循环的数据的时候可以在外层包裹一层容器，可以使用<div>或者占位符<template> -->
        <!-- 当不需要外层包裹容器的标签显示在DOM中时可以用<template>占位符，它可以帮助我们包裹元素，渲染的时候不会出现在页面上 -->
        <!-- <template v-for="(item, index) of fruits">
            <div>{{index}} . {{item.value}}</div>
            <span>{{item.value}}</span>
        </template> -->

    
        <!-- 对象循环 -->
        <!-- vm.userInfo.name = "King Wong" 修改对象数据，数据改变，页面也改变-->
        <!-- 如果要添加数据并且要让页面同时发生改变，直接通过vm.userInfo.hobby = "baseball"不生效，只能通过改变对象引用 -->
        <!-- vm.userInfo = {
            name: "King",
            age: 22,
            gender: "male",
            hobby: "baseball"
        } -->
        <div v-for="(item1, key, index) of userInfo">
            {{item1}} ---- {{key}} ---- {{index}}
        </div>
    </div>

    <script>
        // 动态的往数组里添加数据的时候可以使用push方法，如在命令行里vm.fruits.push({id: "004", value: "banana"})
        // 页面会自动的响应出增加的内容
        // 然而使用vm.fruits[3] = {id: "004", value: "banana"},页面不会显示添加的数据，虽然数据已经被加入进去了
        // 尝试修改数组里的内容的时候，不能直接通过下标的方式，只能通过Vue提供的编译方法来操作数组才能够实现数据发生变化页面也变化的效果
        // Vue中一共提供了7个数组的编译方法
        // pop方法，删除数组最后一项；push方法，往数组增加一条数据
        // shift方法，删除数组第一项；unshift方法，往数组的第一项里增加一些内容
        // splice方法，数组的截取；sort方法，数组排序；reverse方法，数组取反

        // 使用splice方法修改数组第2项
        // vm.fruits.splice(1, 1, {id:"222", value: "mango"})

        // 除了编译方法，还可以改变数组的引用，使得数据发生改变页面也发生改变
        // vm.fruits = [{
        //             id: "001",
        //             value: "apple"
        //         }, {
        //             id: "222",
        //             value: "banana"
        //         }, {
        //             id: "003",
        //             value: "orange"
        //         }]
        var vm = new Vue({
            el: "#app",
            data: {
                fruit: [
                    "apple",
                    "orange",
                    "banana",
                    "mango",
                    "pear"
                ],
                fruits: [{
                    id: "001",
                    value: "apple"
                }, {
                    id: "002",
                    value: "pear"
                }, {
                    id: "003",
                    value: "orange"
                }],
                userInfo: {
                    name: "King",
                    age: 22,
                    gender: "male"
                }
            }
        })
    </script>
</body>
</html>