背景
我想构建一个将被重复使用两次的 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 Grid 渲染并放置在相关位置,但是随后出现了新内容,这并没有按照我期望的方式由 Grid 处理(在这里疯狂猜测)
( 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.'
})
}
})
.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;
}
<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 网格的正确方法是什么?
最佳答案
您正在重复网格而不是内容。您需要将内容包装成 <template>
或 <div>
:
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.'
})
}
})
.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<div class="grid">
<template v-for="e1 in els1">
<span class="hour">{{e1.first}}</span> <span class="name">{{e1.last}}</span>
</template>
</div>
<div class="grid" >
<template v-for="e2 in els2">
<span class="hour">{{e2.first}}</span> <span class="name">{{e2.last}}</span>
</template>
</div>
</div>
关于javascript - 如何使用 Vue 构建动态 CSS 网格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49931070/