Vue 列表渲染

最新推荐文章于 2022-04-28 16:48:36 发布
最新推荐文章于 2022-04-28 16:48:36 发布
阅读量346 收藏
点赞数
分类专栏： Vue 框架 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tineaine/article/details/121602365
版权
框架 同时被 2 个专栏收录
33 篇文章 0 订阅
订阅专栏
Vue
13 篇文章 0 订阅
订阅专栏

基础遍历（v-for）

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title> Vue学习第二天 </title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
    </style>
</head>

<body>
    <div id="root">
        <!-- 
            v-for的key（默认使用index作为key）必须是数据的唯一标识，
            否则在某些特殊场景下（例如新插入的数据破坏了原有的顺序）
            会造成数据错乱并降低效率

            vue在渲染时会首先生成一个虚拟DOM，然后再根据虚拟DOM生成真实DOM
            当数据发生变化时，Vue会重新生成虚拟DOM，并根据Key值去和真实DOM比较
            是否发生了变化，一旦顺序破坏，那index也会被重新排序，因此可能造成
            输入类的项被忽略渲染和可以复用的项重复渲染
            
         -->
        <h3>遍历列表</h3>
        <ul>
            <li v-for="(apple,index) in apples" :id="apple.id">
                版本：{{apple.version}} , 价格：{{apple.price}} , 索引{{index}}
            </li>
        </ul>
        <h3>遍历对象</h3>
        <ul>
            <li v-for="(val,key) in me" :id="key">
                key:{{key}} , 值{{val}}
            </li>
        </ul>
        <h3>遍历字符串</h3>
        <ul>
            <li v-for="(char,index) in name" :id="index">
                字符：{{char}} 索引：{{index}}
            </li>
        </ul>
        <h3>遍历指定次数</h3>
        <ul>
            <li v-for="(number,index) in 10" :id="index">
                当前数字:{{number}}；当前索引:{{index}}
            </li>
        </ul>

    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    // 数组格式
                    apples: [
                        {
                            id: "001",
                            version: "iphone 13 mini",
                            price: "4999"
                        },
                        {
                            id: "002",
                            version: "iphone 13",
                            price: "5999"
                        },
                        {
                            id: "003",
                            version: "iphone 13 pro",
                            price: "7999"
                        }
                    ],
                    // 对象格式
                    me: {
                        name: "tineaine",
                        height: "176",
                        weight: "70kg"
                    },
                    // 字符串格式
                    name: "TineAine"
                    // 指定次数
                }
            },
            methods: {},
            computed: {}
        });
    </script>
</body>

</html>

列表过滤

watch实现
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title> Vue学习第二天 </title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
    </style>
</head>

<body>
    <div id="root">
        <h3>列表过滤</h3>
        <input v-model="keyWord"></input>
        <ul>
            <li v-for="apple in fliArray" :id="apple.id">
                版本：{{apple.version}} , 价格：{{apple.price}}
            </li>
        </ul>

    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    // 数组格式
                    apples: [
                        {
                            id: "001",
                            version: "iphone 13 mini",
                            price: "4999"
                        },
                        {
                            id: "002",
                            version: "iphone 13",
                            price: "5999"
                        },
                        {
                            id: "003",
                            version: "iphone 13 pro",
                            price: "7999"
                        },
                        {
                            id: "004",
                            version: "iphone 12 mini",
                            price: "3999"
                        },
                        {
                            id: "005",
                            version: "iphone 12",
                            price: "4999"
                        },
                        {
                            id: "006",
                            version: "iphone 12 pro",
                            price: "6999"
                        }
                    ],
                    // 列表过滤输入框
                    keyWord: "",
                    // watch方式修改后的数据
                    fliArray: []

                }
            },
            watch: {
                keyWord: {
                    immediate: true,
                    handler(val) {
                        this.fliArray = this.apples.filter((p) => {
                            return p.version.indexOf(val) != -1
                        })
                    }
                }
            }
        });
    </script>
</body>

</html>

computed实现

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title> Vue学习第二天 </title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
    </style>
</head>

<body>
    <div id="root">
        <h3>列表过滤</h3>
        <input v-model="keyWord"></input>
        <ul>
            <li v-for="apple in filArray" :id="apple.id">
                版本：{{apple.version}} , 价格：{{apple.price}}
            </li>
        </ul>

    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    // 数组格式
                    apples: [
                        {
                            id: "001",
                            version: "iphone 13 mini",
                            price: "4999"
                        },
                        {
                            id: "002",
                            version: "iphone 13",
                            price: "5999"
                        },
                        {
                            id: "003",
                            version: "iphone 13 pro",
                            price: "7999"
                        },
                        {
                            id: "004",
                            version: "iphone 12 mini",
                            price: "3999"
                        },
                        {
                            id: "005",
                            version: "iphone 12",
                            price: "4999"
                        },
                        {
                            id: "006",
                            version: "iphone 12 pro",
                            price: "6999"
                        }
                    ],
                    // 列表过滤输入框
                    keyWord: "",

                }
            },
            methods: {},
            computed: {
                filArray: function () {
                    return this.apples.filter((p) => {
                        return p.version.indexOf(this.keyWord) != -1
                    })
                }
            },
        });
    </script>
</body>

</html>

列表排序

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title> Vue学习第二天 </title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
    </style>
</head>

<body>
    <div id="root">
        <h3>列表过滤</h3>
        <input v-model="keyWord"></input>
        <button @click="sortType=1">升序</button>
        <button @click="sortType=2">降序</button>
        <button @click="sortType=0">原序</button>
        <ul>
            <li v-for="apple in filArray" :id="apple.id">
                版本：{{apple.version}} , 价格：{{apple.price}}
            </li>
        </ul>

    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    // 数组格式
                    apples: [
                        {
                            id: "001",
                            version: "iphone 13 mini",
                            price: "4999"
                        },
                        {
                            id: "002",
                            version: "iphone 13",
                            price: "5999"
                        },
                        {
                            id: "003",
                            version: "iphone 13 pro",
                            price: "7999"
                        },
                        {
                            id: "004",
                            version: "iphone 12 mini",
                            price: "3999"
                        },
                        {
                            id: "005",
                            version: "iphone 12",
                            price: "4999"
                        },
                        {
                            id: "006",
                            version: "iphone 12 pro",
                            price: "6999"
                        }
                    ],
                    // 列表过滤输入框
                    keyWord: "",
                    // 排序类型 0:原序，1:正序，2:逆序
                    sortType: 0

                }
            },
            methods: {},
            computed: {
                filArray: function () {
                    const arr = this.apples.filter((p) => {
                        return p.version.indexOf(this.keyWord) != -1
                    })
                    if (this.sortType) {
                        arr.sort((i1, i2) => {
                            return this.sortType === 1 ? i2.price - i1.price : i1.price - i2.price
                        })
                    }
                    return arr
                }
            },
        });
    </script>
</body>

</html>
TineAine
关注
专栏目录
Vue入门-列表渲染
压缩疯雷的博客
10-19 773
列表渲染用 v-for 把一个数组对应为一组元素在 v-for 里使用对象维护状态数组更新检测替换数组注意事项显示过滤/排序后的结果在 v-for 里使用值范围在 上使用 v-for在组件上使用 v-for 用 v-for 把一个数组对应为一组元素 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 <ul id="example-1"> &
Vue列表渲染
HeX_7的博客
05-05 1439
基本列表、key原理、列表过滤、列表排序、Vue检测数据改变原理
Vue.2.0.5-列表渲染
weixin_34279246的博客
11-16 121
v-for 我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。 基本用法 &lt;ul id="example-1"&gt; &lt;li v-for="item in items"&gt; {{ item.message }} &lt;/li...
Vue.js之列表渲染
chunwujue9927的博客
05-19 194
接下来将为大家介绍Vue.js中很常用和重要的一个特性——列表渲染 ---------------------------------------------------------------------------------- v-for 我们用v-for指令根据一组数组的选项列表...
详解key在Vue列表渲染时究竟起到了什么作用
10-17
综上所述，key在Vue列表渲染中起到了至关重要的作用，它是Vue在处理列表更新时能够快速定位和复用DOM节点的关键。通过合理使用key值，可以优化Vue的列表渲染性能，避免渲染错误，从而提升整个应用的性能和用户体验。
Vue列表渲染的示例代码
12-29
我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用item in items形式的语法： {{ item.message }} var vm = new Vue({ el: '#el', data: { items: [ {message: 'foo'}, {message: '...
Vue列表页渲染优化详解
08-29
在列表渲染中，通过`v-if`或`v-show`控制元素的显示，可以避免渲染不需要的元素。如果某些列表项在初始渲染时就不应显示，使用`v-if`可以延迟它们的创建。 4. **使用`key`属性**： 在`v-for`循环中提供`key`属性...
vue列表渲染
honey_xi的博客
03-31 270
列表渲染 v-for：循环显示列表，只需一个li，即可循环渲染所有内容，所需显示的内容用数组存储，在视图部分采用模板变量显示 <body> <div id="app"> <ul> <li v-for="item in students"> <h3>{{item.studentname}}</h3> ...
vue2x key的原理
weixin_45802907的博客
11-16 136
key的原理 虚拟DOM中key的原理 key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下 对比原则 旧虚拟DOM中找到了与新虚拟DOM相同的key： .若虚拟DOM中内容没变, 直接使用之前的真实DOM！ .若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。 旧虚拟DOM中未找到与新虚拟DOM相同的key 创建新的真实DOM，随后渲染到到页面。
vue的列表渲染
LLL_liuhui的博客
05-14 580
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="a...
Vue的列表渲染
Flora's Zone
04-28 1063
Vue的列表渲染
Vue-列表渲染
weixin_45497246的博客
05-05 308
目录1.Vue怎么渲染一个列表？2.维护状态：key3.数组更新4.显示过滤/排序后的结果5.在 v-for 里使用值范围6.在 template标签上使用 v-for7.在组件上使用 v-for 1.Vue怎么渲染一个列表？ 基于数组使用v-for 指令 v-for 指令需要使用 item in items 语法，不过我们更推荐使用of代替in，因为这样更接近js迭代器的语法。其中 items...
Vue列表渲染详解与示例
"Vue列表渲染的关键在于`v-for`指令，用于基于数组或对象的属性迭代来渲染元素。本文提供了一系列示例代码，展示了如何在Vue应用中实现列表渲染，并强调了`v-for`指令的不同用法以及键值(`key`)的重要性。" Vue列表...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值