如何使用vue创建动态网格? [英] How to create a dynamic grid using vue?
本文介绍了如何使用vue创建动态网格?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
使用Vue动态创建网格的最佳方法是什么?
What is the best way to create a grid dynamically with Vue?
我当时在考虑使用v-for循环在页面上生成X个模块的卡片,但想将它们排列成3行。
I was thinking of using the v-for loop to generate cards on a page for X number of 'modules', but would like to arrange them in rows of 3.
例如
Card | Card | Card
Card | Card | Card
推荐答案
You can use CSS grid layout, make sure to check browser support.
我们需要使用<$将容器设为网格容器c $ c> display:grid 并使用 grid-template-columns
。
您可以创建一个接受数字道具的组件,然后以 repeat()
表示法使用它。
You can create a component that accepts a number prop and then use it in the repeat()
notation.
repeat({numberOfColumns},minmax({minColumnSize},{maxColumnSize}))
new Vue({
el: "#app",
data() {
return {
cards: [1, 2, 3, 4],
numberOfColumns: 3,
}
},
computed: {
gridStyle() {
return {
gridTemplateColumns: `repeat(${this.numberOfColumns}, minmax(100px, 1fr))`
}
},
},
methods: {
addCard() {
this.cards.push('new-card')
},
},
})
Vue.config.productionTip = false;
Vue.config.devtools = false;
.card-list {
display: grid;
grid-gap: 1em;
}
.card-item {
background-color: dodgerblue;
padding: 2em;
}
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
ul {
list-style-type: none;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
Columns: <input v-model.number="numberOfColumns">
<ul :style="gridStyle" class="card-list">
<li v-for="(card, index) in cards" class="card-item">
{{ index + 1 }}
</li>
</ul>
<button @click="addCard">
Add card
</button>
</div>
这篇关于如何使用vue创建动态网格?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文