• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue中v-for指令完成列表渲染

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文就Vue中列表渲染做个简单总结和使用演示:

列表渲染是用v-for指令根据绑定一组元素的选项来完成的,渲染格式可以自定义。

1、列表遍历

最基本的使用案例1:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>列表渲染</title>

    <script src="../../js/vue.js"></script>

</head>

<body>

    <div id="app">

        <ul>

            <li v-for="(name,index) in names">

                {{index}}-{{name}}

            </li>

        </ul>

    </div>  

</body>

<script>

    new Vue({

        el:'#app',

        data() {

            return {

                names:['张三','李四','王五','赵六']

            }

        },

    })

</script>

</html>

上面的例子中:通过v-for指令,绑定data中的names数组,以列表的形式遍历出数组中的元素,其中name代表当前数组的一个遍历元素,index是当前元素name在数组中的索引,输出效果如下:

v-for还可以遍历对象,字符串,指定数字等等。如:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>列表渲染</title>

    <script src="../../js/vue.js"></script>

</head>

<body>

    <div id="app">

        <!-- 遍历对象 -->

        <ul>

            <li v-for="(propery,key) in student">

                {{key}}:{{propery}}

            </li>

        </ul>

        <!-- 遍历字符串 -->

        <ol>

            <li v-for="char in str">{{char}}</li>

        </ol>

        <!-- 自定义输出 -->

        <ul>

            <li v-for="num in 10">

                {{num}}

            </li>

        </ul>

    </div>  

</body>

<script>

    new Vue({

        el:'#app',

        data() {

            return {

                student:{

                    name:'李明',

                    age:23,

                    address:'大连'

                },

                str:'HelloWord'

            }

        },

    })

</script>

</html>

上面代码的效果如下:

2、Vue中key的作用

作用:

  • key是虚拟dom对象的标识,当数据发生变化时,vue会根据【新数据】生成【新的虚拟dom】,随后Vue进行【新虚拟dom】和【旧虚拟dom】的差异对比

差异对比规则:

  • 先是在【旧虚拟dom】中找到与【新虚拟dom】相同的key
  • (1)若虚拟dom中的内容没变,直接使用之前的真实dom
  • (2)若虚拟dom中的内容边了,则生成新的真实dom,随后替换掉页面中之前的真实dom
  • 若在【旧虚拟dom】中没有找到和【新虚拟dom】相同的key,就创建新的真实dom,随后渲染到页面中

3、列表过滤

列表过滤即在进行列表遍历前对列表元素进行一次筛选,选择出符合要求元素进行展示,如:

假如我们要过滤掉列表里名为‘张三'的人:(可以用computer或者watch这两个属性实现)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>列表渲染</title>

    <script src="../../js/vue.js"></script>

</head>

<body>

    <div id="app">

        <!-- 列表过滤 -->

        <!-- computer方式 -->

        <ul>

            <li v-for="(name,intdex) in showNames">{{name}}</li>

        </ul>

        <!-- watch方式 -->

        <ol>

            <li v-for="(name,index) in displayName">{{name}}</li>

        </ol>

    </div>  

</body>

<script>

    new Vue({

        el:'#app',

        data() {

            return {

                names:['张三','李四','王五','赵六'],

                displayName:[],

            }

        },

        watch: {

            name:{

                immediate:true,

                handler(val){

                    this.displayName=this.names.filter((n)=>{

                        return n!='张三'

                    })

                }

            }

        },

        computed: {

            // 假如我们要过滤掉名为'张三'的人

            showNames(){

                return this.names.filter((n)=>{

                    return n!="张三"

                })

            }

        },        

    })

</script>

</html>

效果:

到此这篇关于 vue中v-for指令完成列表渲染的文章就介绍到这了,更多相关 vue中v-for指令内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Vue中props用法介绍发布时间:2022-02-05
下一篇:
vue中install方法介绍发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap