出身背景
我想构建一个Vue。js组件将重复使用两次-组件彼此相邻,由CSS网格管理(
display: grid;
)。它们将在屏幕宽度上占据相等的空间。
组件本身将是行的网格,在Vue中动态生成。
这应该是这样的:
普通HTML/CSS解决方案(工作正常)
下面的代码正确地生成了我所期望的内容:左边是三行时间/内容对,右边是两行(
Codepen version
)
.grid {
display: grid;
grid-template-columns: 6ch auto;
}
#app {
width: 400px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.hour {
text-align: right;
padding: 3px 5px 3px 3px;
}
.name {
text-align: left;
padding: 3px 5px 3px 3px;
}
<div id="app">
<div class="grid">
<span class="hour">9:10</span> <span class="name">Acituf haih bim nizec ziohra uvi utucivsew koukeji fip kene ejviv wiel oj paphewan ilo newut.</span>
<span class="hour">19:40</span> <span class="name">Macun dahhis cekdiwvug iti fieldu ab rewki pa ruoti abfonon cagoh codsi zadufi pu jurwut urmo owzew cawub.</span>
<span class="hour">23:18</span> <span class="name">Zerba clegsns dgdrelm cevblrh.</span>
</div>
<div class="grid">
<span class="hour">12:17</span> <span class="name">Hevkeek pe niwwat omkodo hapwas fepono azahawop ir bilbuel kame usipe cato icakori rosi sommawo.</span>
<span class="hour">14:10</span> <span class="name">Hocmaizi weipe low rit todzup evtepcot zesaif unebojmug bageta ri fop sec ibti kukdo caukuocu fugocofo.</span>
</div>
</div>
HTML/CSS/JS+Vue版本(未按预期工作)
现在,在装载组件时通过Vue生成相同的内容。
请注意,结果是不同的:所有框都混淆了。
我想这是因为内容出现了,然后通过CSS网格呈现并放置在相关位置,但随后出现了新内容,而网格并没有按照我所期望的方式处理(这里进行了疯狂的推测)
(
Codepen version
)
new Vue({
el: '#app',
data: {
els1: [],
els2: []
},
mounted() {
// content of the left box
this.els1.push({
first: '9:10',
last: 'Acituf haih bim nizec ziohra uvi utucivsew koukeji fip kene ejviv wiel oj paphewan ilo newut.'
})
this.els1.push({
first: '19:40',
last: 'Macun dahhis cekdiwvug iti fieldu ab rewki pa ruoti abfonon cagoh codsi zadufi pu jurwut urmo owzew cawub.'
})
this.els1.push({
first: '23:18',
last: 'Zerba clegsns dgdrelm cevblrh.'
})
// content of the right box
this.els2.push({
first: '12:17',
last: 'Hevkeek pe niwwat omkodo hapwas fepono azahawop ir bilbuel kame usipe cato icakori rosi sommawo.'
})
this.els2.push({
first: '14:10',
last: 'Hocmaizi weipe low rit todzup evtepcot zesaif unebojmug bageta ri fop sec ibti kukdo caukuocu fugocofo.'
})
}
})
.网格{
显示:栅格;
网格模板列:6ch auto;
}
#应用程序{
宽度:400px;
显示:栅格;
网格模板列:1fr 1fr;
}
.小时{
文本对齐:右对齐;
填料:3px 5px 3px 3px;
}
.名称{
文本对齐:左对齐;
填料:3px 5px 3px 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<div class="grid" v-for="e1 in els1">
<span class="hour">{{e1.first}}</span> <span class="name">{{e1.last}}</span>
</div>
<div class="grid" v-for="e2 in els2">
<span class="hour">{{e2.first}}</span> <span class="name">{{e2.last}}</span>
</div>
</div>
指导CSS网格处理此类动态内容的正确方法是什么?
