个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我在使用 Vue.js 时遇到问题，无法选择最后一个 <hr/>在 div 中添加标签，以便我可以将其删除。
我的目标是删除最后一个 <hr/> div 中的标签。
Here is an example of the issue :
JS
<div id="app">
<div v-for="(item, i) in list" class="exampleclass">
<div>
<button>btn {{i}}</button>
</div>
<input placeholder="sometext"></input>
<hr /> // I want to remove the last instance of this element
</div>
</div>
CSS:
hr {
border-color:green;
}
/*
I want to display: none this last hr element, but I'm making it
blue here for clarity of the issue. See the image below
*/
.exampleclass > hr:last-of-type {
border-color:blue;
}
这是以下代码的输出: 
正如你所看到的，而不是只有最后一个 <hr/>元素是蓝色的，每个元素都是蓝色的。我尝试过将类移至父级 div，但没有成功。
我能够在普通 javascript 中实现正确的行为，即 you can see here 。但由于某种原因我无法让它在 Vue 中工作。
如何选择最后一个hr Vue.js 中 div 内的元素？
最佳答案
这实际上不是 Vue 的问题，而是选择器作用于哪些元素的问题。您使用的选择器正在选择具有 .exampleclass 类的每个元素内的最后一个 hr 元素。您真正想要的是最后一个 .exampleclass 元素的 hr。
您应该能够通过以下方式做到这一点:
.exampleclass:last-of-type > hr {
border-color: blue;
}
这是一个完整的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
hr {
border-color: green;
}
.exampleclass:last-of-type > hr{
border-color: blue;
}
</style>
</head>
<body>
<div id="app">
<div v-for="(item, i) in list" class="exampleclass">
<div>
<button>btn {{i}}</button>
</div>
<input placeholder="sometext"> {{ item }} </input>
<hr />
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
list: ['itemOne', 'itemTwo', 'itemThree']
}
});
</script>
</html>
关于javascript - Vue.js 使用伪选择器选择 div 中的最后一个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59792408/
27
4
0
这个问题在这里已经有了答案: “return” and “try-catch-finally” block evaluation in scala (2 个回答) 7年前关闭。 为什么method1返
我有一个动态列表，需要选择最后一项之前的项目。 drag your favorites here var lastLiId = $(".album
我想为每个线程执行特定操作，因此，我认为tearDown Thread Group 不起作用。 是否有任何替代方法可以仅在线程的最后一次迭代时运行“仅一次 Controller ”？ 谢谢。 最佳答案
在我的书中它使用了这样的东西: for($ARGV[0]) { Expression && do { print "..."; last; }; ... } for 循环不完整吗？另外，do 的意义何
我想为每个线程执行特定操作，因此，我认为tearDown Thread Group 不起作用。 是否有任何替代方法可以仅在线程的最后一次迭代时运行“仅一次 Controller ”？ 谢谢。 最佳答案
有没有可能 finally 不会被调用但应用程序仍在运行？ 我在那里释放信号量 finally { _semParallelUpdates.Re
我收藏了 对齐的元素，以便它们形成两列。使用 nth-last-child 的组合和 nth-child(even) - 或任何其他选择器 - 是否可以将样式应用于以下两者之一:a)最后两个(假设
我正在阅读 Jon Skeet 的 C# in Depth . 在第 156 页，他有一个示例， list 5.13“使用多个委托(delegate)捕获多个变量实例化”。 List list = n
我在 AM4:AM1000 范围内有一个数据列表(从上到下有间隙)，它总是被添加到其中，我想在其中查找和总结最后 4 个结果。但我只想找到与单独列相对应的结果，范围 AL4:AL1000 等于单元格
我最近编写了一个运行良好的 PowerShell 脚本 - 然而，我现在想升级该脚本并添加一些错误检查/处理 - 但我似乎被第一个障碍难住了。为什么下面的代码不起作用？ try { Remove-
这个问题在这里已经有了答案: Why does "a == x or y or z" always evaluate to True? How can I compare "a" to all of
使用 Django 中这样的模型，如何检索 30 天的条目并计算当天添加的条目数。 class Entry(models.Model): ... entered = models.Da
我有以下代码。 public static void main(String[] args) { // TODO Auto-generated method stub
这个问题在这里已经有了答案: Why does "a == x or y or z" always evaluate to True? How can I compare "a" to all of
这个问题已经有答案了: Multiple returns: Which one sets the final return value? (7 个回答) 已关闭 8 年前。 我正在经历几个在工作面试中
$ cat n2.txt apn,date 3704-156,11/04/2019 3704-156,11/22/2019 5515-004,10/23/2019 3732-231,10/07/201
我可以在 C/C++ 中设置/禁用普通数组最后几个元素的读(或写)访问权限吗？由于我无法使用其他进程的内存，我怀疑这是可能的，但如何实现呢？我用谷歌搜索但找不到。 如果可以，怎样做？ 因为我想尝试这样
我想使用在这里找到的虚拟键盘组件 http://www.codeproject.com/KB/miscctrl/touchscreenkeyboard.aspx就像 Windows 中的屏幕键盘 (O
我正在运行一个 while 循环来获取每个对话的最新消息，但是我收到了错误 [18-Feb-2012 21:14:59] PHP Warning: mysql_fetch_array(): supp
这个问题在这里已经有了答案: How to get the last day of the month? (44 个答案) 关闭 8 年前。 这是我在这里的第一篇文章，所以如果我做错了请告诉我...
我是一名优秀的程序员,十分优秀！