vue踩坑记录 v-for 与elementUi layout布局的相关用法

首先我们要实现的功能是 循环一个数组输出到el-row里边  然后在这里边绑定数据 跟点击事件 上代码

页面代码：
<el-row >
 <el-col v-for="(item,index) in firstMenu" 
    :key="index" @click.native="handlClick(item)">
   <div style="align:center">
       <span style="margin-left: 10px"><img :src="item.imgPath"/></span>
   </div> 
   <div style="text-align:center">
       {{item.DName}}
   </div>
 </el-col>
</el-row>



绑定数据：
    firstMenu:[
          {
              DName:'',
              code:'',
              id:'',
              imgPath:require('./img/1.jpg')
          },{
              DName:'',
              code:'',
              id:'',
              imgPath:require('./img/1.jpg')
          }
      ],

点击事件：
    handlClick(item){
       console.log(item.DName);
    }

这里有几点需要说一下：

      首先是 v-for 这个标签 前面是没有 ： 的 没有！！！！

      第二个呢就是 数据绑定的时候图片的路径问题  就是 :src  这样才是动态绑定的状态

      第三个呢 图片路径问题 写法呢 就是  imgPath那里边的写法了  具体路径自己改就是了

      第四个 点击事件 一般的我们用的点击事件都是  @click="aa()"  这样写的 但是

      在这里呢 在el-col这个标签里面 要写 @click.native="aa()" 这样 他才会有效

      基本就这些  另外关于 v-for的 in 跟 of 的使用  这些官方文档都有说明 可以自己看下