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

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

[code]页面代码：
<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 的使用  这些官方文档都有说明 可以自己看下