vue中的列表渲染

Posted xuyxbiubiu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue中的列表渲染相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中列表渲染</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <!--<template v-for="(item,index) of list"-->
             <!--:key="item.id">-->
        <!--<div>                  &lt;!&ndash;使用key值提高查询效率  template模板占位符，并不渲染在页面上&ndash;&gt;-->
            <!--{{item.text}} -&#45;&#45;{{index}}-->
        <!--</div>-->
        <!--<span>-->
            <!--{{item.text}}-->
        <!--</span>-->
        <!--</template>-->

        <div v-for="(item,key,index) of userInfo">
            {{item}}---{{key}}---{{index}}
        </div>               <!--对对象进行循环-->
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                userInfo:{
                    name:‘alex‘,
                    age:‘27‘,
                    gender:‘male‘,
                    salary:‘secret‘
                }
            //     list:[
            //         {id:‘001‘,text:‘hello‘},
            //         {id:‘002‘,text:‘alex‘},
            //         {id:‘003‘,text:‘hello‘}
            // ]
            }
        })
    </script>
</body>
</html>


<!--

当尝试修改数组内容的时候，不能直接通过下标的形式改变数组，只能通过vue提供的变异方法才能这样做

一共提供7中变异方法 push  pop shift unshift splice  sort reverse

方法二：改变引用；直接改变list -> vm.list =[{}]  让他指向另外的地址  同理针对对象也可以改变引用改数据


-->

 

以上是关于vue中的列表渲染的主要内容，如果未能解决你的问题，请参考以下文章

vue中的列表渲染

Vue中的条件渲染和循列表渲染

如何从动态列表中为 Vue 中的 API 响应创建列表渲染 JSON？

3-7 Vue中的列表渲染

渲染期间嵌套 ul 列表中的简单 Vue.Draggable 中断

Vue条件列表渲染