引用页
<template>
<div id>
<div>
<!-- 模板运用 -->
<!--把item,跟index传入组件 :item="item" :index="index"-->
<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};