JS经典实例网站首页 JS经典实例

vue全局组件接收参数及for中的key的注意事项

发布时间：2020-04-06 11:37:15编辑：雪饮阅读（）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        .userList{
            border: 1px solid red;
            margin: 20px 0;
            padding: 10px 10px;
        }
    </style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script src="lodash.min.js"></script>
<script type="text/javascript">
    //定义vue全局组件my-com
    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:{
            //该组件接收Object对象，像是数组也会有报错，只有纯object不报错
            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'></my-com>

            </div>
         `,
        methods:{
            change(){
                //lodash这个js库中有几个不错的函数，而这里shuffle函数是可以打乱数组的顺序
                this.datas = _.shuffle(this.datas);
            }
        }
    };

    new Vue({
        el:'#app',
        components:{
            App
        },
        template:`<App />`
    });
</script>

</body>
</html>

关键字词：vue,全局组件,接收参数,for,key,绑定,打乱

上一篇：webpack引入vue单文件

下一篇：vue组件间数据传递（event）

您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

vue全局组件接收参数及for中的key的注意事项

相关文章

您当前的位置：首页 > 学无止境 > JS经典实例网站首页 JS经典实例