javascript - 如何使用 CSS 在 Vue JS v-for 循环中添加换行符
问题描述
如果单击列表项,我需要按字母顺序显示名称。为此,我正在使用 Vue.js 和 Flex Grid。
我有一个名为 ListAll 的列表项,
单击 ListAll 时,我必须显示 nameList 数组中按名称分组的所有记录。我在显示分组名称时遇到问题。我正在使用 Flex Grid 来显示名称。显示 A 的记录后,B 的记录应从新行开始,但 B 记录不会换行。如何使用 Vue js 或 ES6 或 CSS 语法在每组名称后添加换行符?
我已经添加了这样的换行符<div class="break"></div>
,但它并没有打破记录。
使用这样的 flexbox 网格 CSS 类,记录显示在 4 列中,没有换行符,
Apples Apricots Avocados Almond
Abiu Berry Bananas Boysenberries
Blueberries Breadfruit Carambola Cantaloupe
Cranberries Cherries Custard-Apple
预期结果:
Apples Apricots Avocados Almond
Abiu
Berry Bananas Boysenberries Blueberries
Breadfruit
Carambola Cantaloupe Cranberries Cherries
Custard-Apple
AlphabeticalFruitsName.vue
<template>
<div id="wrapper">
<ul class="listitems">
<li><a
href="javascript:;" @click="userSelection('ListAll')">ListAll</a>
</li>
</ul>
<div class="grid-container">
<div v-for="(name, index) in nameList" :key="name" class="grid-item">
<ul v-for="letter in alphabets" :key="letter">
<li v-if="name.startsWith(letter)"><a>{{ name }}</a></li>
<div class="break"></div>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'AlphabeticalFruitsName',
data() {
return {
nameList: [],
alphabets: ['A','B','C','D','E','F','G','H','I','J','K','L',
'M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',],
names: [
{ name: 'Apples' },{ name: 'Apricots' },{ name: 'Avocados' },{ name: 'Apple Berry' },
{ name: 'Apple guava' },{ name: 'Almond' },{ name: 'Almond' },{ name: 'African Honeysuckle' },
{ name: 'African Plum' },{ name: 'Abiu' },{ name: 'Bananas' },{ name: 'Boysenberries' },
{ name: 'Blueberries' }, { name: 'Bing Cherry' },{ name: 'Breadfruit' },{ name: 'Cantaloupe' },
{ name: 'Carambola' },{ name: 'Cherimoya' },{ name: 'Cherries' },{ name: 'Cranberries' },
{ name: 'Custard-Apple' },{ name: 'Dates' }, { name: 'Honeysuckle' },{ name: 'Gooseberries' },
{ name: 'Grapefruit' },{ name: 'Grapes' },{ name: 'Guava' },{ name: 'Tangerine' },
{ name: 'Kiwi' },{ name: 'Lychee' },{ name: 'Strawberries' }, { name: 'Watermelon' }],
};
},
methods: {
userSelection(listItemName) {
this.nameList = [];
if (listItemName === 'ListAll') {
for (const value of this.names) {
this.nameList.push(value.name);
}
}
},
},
};
</script>
<style lang="scss" scoped>
.listitems {
display: flex;
justify-content: center;
}
ul {
list-style-type: none;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
padding: 10px;
}
.grid-item {
text-align: center;
}
.new-line:last-child {
content: '\a';
white-space: pre;
}
.break {
flex-basis: 100%;
height: 0;
}
</style>
解决方案
这将检查第一个元素之后的每个元素,以查看当前名称和以前名称的第一个字母是否不匹配,如果不匹配,它将输出一个br
. 我假设您的列表已经按字母顺序排列。
<div v-for="(name, index) in nameList" :key="name" class="grid-item">
<ul v-for="alphabet in alphabets" :key="alphabet">
//a BR or whatever element you need
<br v-if="i > 0 && nameList[i-1].name.charAt(0) !== name.charAt(0)"/>
<li v-if="name.startsWith(alphabet)"><a>{{ name }}</a></li>
<div class="break"></div>
</ul>
</div>
推荐阅读
- swift - typealias swift的问题
- java - 如何编译 java 程序,同时保持 windows-1252 编码文件名?
- c# - 谷歌语音到文本 api 与单一的话语
- python - Dask 计算非常慢
- php - 通过 phpmailer 发送图片到邮件
- symfony - Symfony 表单多对多选择选项不起作用
- asp.net-mvc - 如何在@URL 中放置多个 Id 参数。动作和控制器获取 ID
- json - React Native:如何从导入的 JSON 文件中获取数组的长度?
- php - 为什么 Laravel 分页总是显示相同的页面?
- java - java spring mvc json数据绑定自定义json响应