1、使用子数组循环输出一堆数据。

2、不依赖子组件状态或临时 DOM 状态（例如：表单输入值）的列表渲染输出。

3、建议 v-for 就加上 key，提升性能，避免 vue 运算， key 就是记录元素与 DOM 间的位置关系。

案例：

1、创建一个 my-com 全局组件，在全局组件中使用 props 属性接收父组件的值。

Vue.component('my-com',{
　　template:` 
　　　　<div class='userList'>
　　　　　　<div class='content'>
　　　　　　　　<h3>{{obj.name}}</h3>
　　　　　　　　　　<p>{{obj.content}}</p>
　　　　　　</div>
　　　　　　<div class="control">
　　　　　　　　<input type="text" placeholder='请输入你的名字'>
　　　　　　</div>
　　　　</div>
　　`,
　　props:{
　　　　// 接收父组件传过来的属性
　　　　obj: Object
　　}
});

2、创建一个 App 组件，在App 组件内调用 my-com 组件，并将数据通过 v-bind 将结果绑定到 obj 中。

<my-com v-for='(item,index) in datas' :obj='item' :key='item.id' />

3、在 App 组件中绑定点击事件，当点击事件发生时，调用  _.shuffle 创建一个打乱顺序的数组。

change(){
    this.datas = _.shuffle(this.datas);
}

css 代码：

    <style type="text/css">
        .userList{
            border: 1px solid red;
            margin: 20px 0;
            padding: 10px 10px;
        }
    </style>

js 代码：

    <script type="text/javascript">
        Vue.component('my-com',{
            template:` 
                <div class='userList'>
                    <div class='content'>
                        <h3>{{obj.name}}</h3>
                        <p>{{obj.content}}</p>
                    </div>
                    <div class="control">
                        <input type="text" placeholder='请输入你的名字'>
                    </div>
                </div>
            `,
            props:{
                // 接收父组件传过来的属性
                obj: Object
            }
        });
        var App = {
            data(){
                return{
                    datas:[
                        {id:1, name:'张三', content:'我是张三'},
                        {id:2, name:'李四', content:'我是李四'},
                        {id:3, name:'王五', content:'我是王五'}
                    ]
                }
            },
            template:`
                <div>
                    <button @click='change'>改变顺序</button>

                    <my-com v-for='(item,index) in datas' :obj='item' :key='item.id' />
                </div>
            `,
            methods:{
                change(){
                    this.datas = _.shuffle(this.datas);
                }
            }
        };
        new Vue({
            el:'#app',
            template:` 
                <App/>
            `,
            components:{
                App
            }
        });
    </script>

 

原文地址：http://www.cnblogs.com/sfwu/p/16910236.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性