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 =[{}]  让他指向另外的地址  同理针对对象也可以改变引用改数据


-->

 

posted @ 2018-11-16 10:41  alexbiu  阅读(1710)  评论(0)    收藏  举报