|
|
//正常情况下<template>
<div id="index">
<list class="demo-page">
<block for="listData">
<list-item type="listItem" class="item">
<text class="title">{{$item.name}}text>
list-item>
block>
list>
div>
template>
<style>
#index {
flex-direction: column;
}
.title {
font-size: 40px;
text-align: center;
padding: 20px;
width: 100%;
}
style>
<script>
export default {
data: {
listData: [
{name: 'a'},
{name: 'b'},
{name: 'c'},
{name: 'd'},
]
}
}
script>//运行结果如下面正常
//多套了div <template>
<div id="index">
<div class="div-wrap">
<list class="demo-page">
<block for="listData">
<list-item type="listItem" class="item">
<text class="title">{{$item.name}}text>
list-item>
block>
list>
div>
div>
template>
<style>
#index {
flex-direction: column;
}
.div-wrap{
flex-direction: column;
}
.title {
font-size: 40px;
text-align: center;
padding: 20px;
width: 100%;
}
style>
<script>
export default {
data: {
listData: [
{name: 'a'},
{name: 'b'},
{name: 'c'},
{name: 'd'},
]
}
}
script>
//这样子就是多套了div 效果就是空白的了 如下图
|
|
