mpvue 组件循环并动态赋值

小咪咪 2021-07-24 23:30 440阅读 0赞

引用页

<template>
      <div id>
        <div>
          
    
          <ListTmp v-for="(item,index) in listData" :key="index" :item="item" :index="index"/>
        </div>
      </div>
    </template>
    <script>
    // 
    import ListTmp from "../list-templatv/list-templatv.vue";
    import List from "../../datas/list-data.js";
    export default {
      data() {
        return {
          listData: []
        };
      },
      // 
      components: { ListTmp },
      beforeMount() {
        this.fun();
      },
      methods: {
        fun() {
          //  跟新数据
          this.listData = List.list_data;
          this.ilist();
        },
        ilist() {
          console.log(this.listData);
         
        }
      }
    };
    </script>
    
    <style>
    </style>

组件页

<template>
      <div class="tmp">
        <div class="ava">
          <img :src="item.hd" alt />
          <span>{
       {item.data}}</span>
        </div>
        <p class="com">{
       {item.name}}</p>
        <img class="del_img" :src="item.wep" alt />
        <p
          class="con"
        >内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        <div class="lis">
          <img :src="item.llImg" alt />
          <span>{
       {item.ll}}</span>
          <img :src="item.zanImg" alt />
          <span>{
       {item.zan}}</span>
        </div>
      </div>
    </template>
    <script>
    export default {
    //接收传入的item，跟index
      props: ["item", "index"]
    };
    </script>
    
    <style>
    .tmp {
        border: 1rpx solid #f000ff;
      display: flex;
      flex-direction: column;
      border-bottom: 1rpx solid #eee;
    }
    .ava {
      padding: 10rpx;
    }
    .ava img {
      width: 60rpx;
      height: 60rpx;
      vertical-align: middle;
      margin-right: 10rpx;
      border-radius: 50%;
    }
    .ava span {
      font-size: 28rpx;
      color: #333;
    }
    .com {
      font-size: 28rpx;
      font-weight: bold;
      padding: 10rpx;
    }
    .del_img {
      width: 100%;
      height: 460rpx;
    }
    .con {
      font-size: 32rpx;
      /* 文本缩进 */
      text-indent: 32rpx;
      /* 行高 */
      line-height: 50rpx;
      /* 字间距 */
      /* 对字母以及中文 */
      letter-spacing: 3rpx;
      /* 针对英文单词对中文不生效 */
      /* word-spacing:  */
    }
    .lis img {
      width: 32rpx;
      height: 32rpx;
      vertical-align: middle;
      margin-left: 10rpx;
    }
    .lis span {
      font-size: 28rpx;
      color: #333;
      margin-left: 10rpx;
    }
    </style>

josn数组页

let list_data=[{
        hd:'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
        data:'2012',
        name:'1321',
        wep:'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
        con:'hjkljhgfxz',
        zan:'2432',
        ll:'r43t',
        zanImg:'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
        llImg:'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640'
    },{
        hd:'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
        data:'2019',
        name:'12rwds',
        wep:'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
        con:'1234567ui哦科比VCD撒',
        zan:'3t2412',
        ll:'531',
        zanImg:'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
        llImg:'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640'
    },
    {
        hd:'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640',
        data:'2013',
        name:'gvdcx',
        wep:'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640',
        con:'你手机开发的奶奶你渴望咖啡',
        zan:'3214',
        ll:'3214',
        zanImg:'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640',
        llImg:'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
    }]; 
    export default{list_data};