vuejs2 - 如何将活动类添加到特定 div
问题描述
<newsfeed-view inline-template :newsfeed="{{ $feed }}">
<article class="bg-white p-8 w-1/2 mt-4 p-4" id="newsfeedPost" v-bind:class="{ 'active' : isHighlighted } ">
<h3>
<a href="#" class="text-blue-dark hover:no-underline hover:text-black active:no-underline active:text-4xl" @click="this.isHighlighted = true">{{ $feed->newsfeed_title }}</a>
</h3>
<p class="mt-4">{{ $feed->body }}</p>
</article>
</newsfeed-view>
这是我的风格部分
<style lang="scss" scoped>
.highlighted {
@apply .border-l-4 .border-orange ;
}
#newsfeedPost {
@apply .rounded-lg ;
}
</style>
如果单击该锚标记,我想添加突出显示的类..
解决方案
您的线路v-bind:class="{ 'active' : isHighlighted }"
将切换active
课程。如果要按照highlighted
样式表中的指示切换类,请使用:
v-bind:class="{ 'highlighted' : isHighlighted }"
推荐阅读
- ruby-on-rails - 如何在 Rails 中使用表单更新多个用户?
- c# - 在 ASP.NET Core 3 中更改单个 ASP.NET Core API 控制器或单个操作的 System.Text.Json 序列化选项
- r - 如何在 R Studio 中正确显示中文文本?
- gradle - 如何使用 gradle 命令行启动这个项目?
- ionic-framework - 如何在离子卡中以宽度居中图像
- excel - 来自用户窗体的自定义数字格式
- scala - 线程“主”org.apache.spark.sql.AnalysisException 中的异常:_1、_2 中没有此类结构字段 startId;
- asp.net-core - 从 Npgsql.PostgresException 获取客户端可读消息
- php - 我做了一个登录表单,但我遇到了一个问题,我的密码同时接受小写字母和大写字母
- html - CSS 选择器选择一个元素,如果它只包含另一个元素,没有任何其他文本