html-lists 相关问题

我在 Vue.js 中有一个嵌套的 for ... in 循环。我想要做的是在元素的值为 null 时跳过元素。下面是 Vue 模板代码：我在 Vue.js 中有一个嵌套的 for ... in 循环。如果元素的值为null，我想要做的是跳过元素。这是 Vue 模板代码： <ul> <li v-for="item in items" track-by="id"> <ol> <li v-for="child in item.children" track-by="id"></li> </ol> </li> </ul> null元素可能同时存在于item和item.children对象中。例如： var data = { 1: { id: 1, title: "This should be rendered", children: { 100: { id: 100, subtitle: "I am a child" }, 101: null } }, 2: null, 3: { id: 3, title: "Should should be rendered as well", children: {} } }; 使用此数据 data[1].children[101] 不应呈现，如果 data[1].children[100] 稍后变为空，则应从列表中省略它。我无法控制这些数据的结构，所以我必须以这种形式处理它。一个简单的v-if可能会起作用： <li v-for="item in items" v-if="item !== null" track-by="id"> 试一试。如果没有，请这样做：您可以为此添加一个过滤器（在您的 App 实例之前的main.js）： Vue.filter('removeNullProps', function(object) { return _.reject(object, (value) => value === null) }) 然后在模板中： <li v-for="item in items | removeNullProps" track-by="id"> <ol> <li v-for="child in item.children | removeNullProps" track-by="id"></li> </ol> </li> 在 Vue 2 中，过滤器已在 v-fors 中弃用。现在你应该使用计算属性。下面的演示。 new Vue({ el: '#app', data: { items: [ 'item 1', 'item 2', null, 'item 4', null, 'item 6' ] }, computed: { nonNullItems: function() { return this.items.filter(function(item) { return item !== null; }); } } }) <script src="https://unpkg.com/vue@2"></script> <div id="app"> Using a computed property: <ul> <li v-for="item in nonNullItems"> {{ item }} </li> </ul> <hr> Using v-if: <ul> <li v-for="item in items" v-if="item !== null"> {{ item }} </li> </ul> </div> 我建议你不要在同一个元素中使用 v-if 和 v-for。我发现有效但不影响性能的是： <li v-for="(value, key) in row.item.filter(x => x !== null)" :key="key"{{value}}</li> 你只需要在你正在经历的数组上运行过滤函数。这是 c# 中的常见用法，发现它在 JavaScript 中也没有什么不同。这基本上会在迭代时跳过空值。希望这会有所帮助（3 年后）。只需使用v-if来处理它。但首先，不要使用 track-by="id" 因为 null 项目和 null 孩子。您可以在此处查看演示 https://jsfiddle.net/13mtm5zo/1/。也许更好的方法是在渲染之前先处理数据。 Vue.Js 风格指南告诉我们： “永远不要在与 v-for 相同的元素上使用 v-if。” 如何根据 Vue 风格指南正确处理 v-if 和 v-for： <ul v-if="shouldShowUsers"> <li v-for="user in users" :key="user.id" > {{ user.name }} </li> </ul> 在此处查看有关如何使用 v-if 处理 v-for 的更多信息：https://v2.vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential

vue.js null html-lists v-for

回答 5 投票 0

两个有序列表的实现

首先我会把你放在上下文中我们有一个有序列表（TAD JuryList）来存储不同的陪审团： typedef 结构 tItemJ{ tJuryName 陪审团名称； tNumVotes 总选民数； tNumVotes 有效投票...

c html-lists

回答 0 投票 0

如何在不破坏嵌套的情况下在其包装器的左侧有一个嵌套列表？

我正在尝试使用新的 Jekyll 主题更新我的个人网站，并且我有一些嵌套列表想保留在我的内容中。主题中的 CSS 设置了 ... 的 padding-left 值我正在尝试使用新的 Jekyll 主题更新我的个人网站，并且我有一些嵌套列表想保留在我的内容中。主题中的 CSS 将 padding-left 的 <ul> 值设置为 0，最终打破了我列表的嵌套。如何在不破坏嵌套的情况下将列表向左填充 0？我想让整个网站的列表样式保持一致。降价来源： + item + nested item + item 2 + nested item 2 HTML 输出： <ul> <li>item <ul> <li>nested item</li> </ul> </li> <li>item 2 <ul> <li>nested item 2</li> </ul> </li> </ul> 实际产量：项目嵌套项目项目 2 嵌套项目 2 预期输出：项目嵌套项目项目 2 嵌套项目 2

html css html-lists

回答 0 投票 0

SFMC HTML UL 列表添加额外的项目符号

我的 UL 结束后出现了额外的项目符号。文字文字文字文字文字 ... 我的 UL 结束后出现了额外的项目符号。 <ul> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text <ul> <li>Text</li> <li>Text</li> </ul> </li> </ul> 我尝试了几种解决方案都没有解决问题。经检查，此代码在我的实例中按预期工作。请检查您的电子邮件内容中是否链接了其他代码。 <ul> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text <ul> <li>Text</li> <li>Text</li> </ul> </li> </ul> 5 “文本”值如“粗体圆点” 2 “空圆项目符号”中的“文本”值

html html-lists nested-lists salesforce-marketing-cloud

回答 1 投票 0

我的导航栏中列表元素之间的一些奇怪的垂直空间不应该在那里

标记空间截图正如您在屏幕上看到的那样，列表项之间有一些垂直空间，我知道如何删除所说的东西，我以前做过但似乎找不到方法

html css html-lists styling

回答 1 投票 0

How to add link to list items in HTML?

Linus Torvalds 上的维基百科页面 Linus Torvald 的个人网站 Linux 内核档案我想添加指向列表项的链接（例如，我必须添加指向维基百科页面的链接...

html html-lists

回答 1 投票 0

为什么我的按钮没有显示在 li 标签内？

我想在中添加一个按钮（deleteButton），之前创建并附加到我的代码：让 eventList = []; const inputBox = document.querySelector('.input-... 我想在 <li></li> 中添加一个按钮（deleteButton），之前创建并附加到 <ol> 我的代码： let eventList = []; const inputBox = document.querySelector('.input-field'); const submit = document.querySelector('.submit'); const itemsList = document.querySelector('.list') function addEvent() { const showEvent = inputBox.value; const li = document.createElement('li'); const deleteButton = document.createElement('button'); itemsList.appendChild(li); li.appendChild(deleteButton); eventList.push(showEvent) li.textContent = showEvent; inputBox.value = ''; } submit.addEventListener('click', addEvent); <h1>TO-DO LIST</h1> <input class="input-field" type="text"> <button class="submit" type="button">ADD TO-DO</button> <ol class="list"></ol> 按钮根本没有显示。我该怎么做才能让它显示在 li 元素中？ let eventList = []; const inputBox = document.querySelector('.input-field'); const submit = document.querySelector('.submit'); const itemsList = document.querySelector('.list'); function addEvent() { const showEvent = inputBox.value; const li = document.createElement('li'); const deleteButton = document.createElement('button'); deleteButton.textContent = "Delete"; li.appendChild(deleteButton); itemsList.appendChild(li); eventList.push(showEvent); li.textContent = showEvent; inputBox.value = ''; deleteButton.addEventListener('click', () => { itemsList.removeChild(li); eventList.splice(eventList.indexOf(showEvent), 1); }); } submit.addEventListener('click', addEvent); 更新后的代码，我们创建一个删除按钮元素，将其文本内容设置为“Delete”，并将其附加为<li> 元素的子元素。我们还为删除按钮添加了一个事件监听器，它从列表中删除<li> 元素，并从 eventList 数组中删除相应的事件。

javascript html html-lists

回答 1 投票 0

如何将列表标记定位到顶部而不是基线？

我有一个只包含图像的 LI，设置为大约 100 像素高。我在此列表中有字母标记，但它们位于图像的底部，靠近左下角；我可以定位...

html css html-lists

回答 1 投票 0

如何复制具有顶部对齐内容和内联 url 的有序列表？

这里的新手在尝试复制这种有序列表样式时会遇到很多麻烦。我已经尝试使用某些样式技术并获得了一些方法但无法添加内联 l ...

html css html-lists

回答 1 投票 0

How to remove ul class with css?

我要显示：无；在 ul 类中的 li 类中：我想display:none;在一个li班里面一个ul班： <ul class="tt-options-swatch options-large"> <li class="active"> <a href="#" data-value="102x31x32"</a> </li> </ul> 我想用 css 删除 ul 类谢谢我试过不显示但什么都没有。我确实在 li 课堂活动中没有显示，但我丢失了另一个数据

css class html-lists

回答 0 投票 0

无序列表<ul></ul>在html中有什么意义？

新手问题，对于列表，... 和 ... 似乎给出相同的东西。我期待无序列表在浏览器呈现后随机排序...... 新手问题，对于一个列表，<ul>...<ul>和<ol>...<ol>似乎都给出了同样的东西。我期望无序列表在浏览器呈现后随机排序，但事实并非如此，那么无序列表的意义何在？ <ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ol style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

html html-lists

回答 0 投票 0

如何在HTML中获取内容<ol> 用python从URL中获取内容。

我想用python为我朋友的Warframe帮派制作一个discord机器人，从PC公告区收集内容。我还没有任何代码，因为我试过的所有东西都有 ...

python html-lists discord.py repl.it

回答 1 投票 -1

如何让我的按钮一次只显示一个项目？

我创建了一个列表，我想把它隐藏起来，不让用户看到，我想用一个按钮来逐一显示列表项目。我使用jquery和css来隐藏显示列表项。我的...

jquery button html-lists

回答 2 投票 3

foo bar baz bam

我想实现的是下面的目标。