详解在Vue中有条件地使用CSS类-创新互联
很多时候Web在运行时要更改元素的CSS类名。但是在改变类名时,有时最好是有条件地应用样式。例如你有一个翻页的效果。翻页效果通常有一个高亮的效果,用于向用户显示当前页,这对于用户而言是很有帮助的。该项目的样式是有条件设置的,基于当前正在查看的页面。
创新互联为企业提供:成都品牌网站建设、网络营销策划、重庆小程序开发、营销型网站建设和网站运营托管,一站式网络营销整体服务。实现不断获取潜在客户之核心目标,建立了企业专属的“全网整合营销推广”,就用不着再为了获取潜在客户而苦恼,相反,客户会主动找您,生意就找上门来了!翻页常见的一个效果看起来像下面这样:
在这个示例中,共有五页,每次只选择其中一个页面。如果你用Bootstrap构建一个分页器,那么所选的页面将有一个名为 active 的CSS类名应用在列表项中。如果页面是当前浏览的页面,那么你希望该类被应用。换句话说,你希望有条件地应用 active 类名。在Vue中,提供了一种方法,可以有条件地将CSS类应用于元素。在接下来的内容中将向大家展示这种技术。
要在运行时有条件地应用CSS类,需要绑定到一个JavaScript对象。要成功完成这个任务,必须完成两个步骤。首先,必须确保定义了CSS类名,然后在模板中创建类绑定。在本文的其他部分,我将详细解释这些步骤。
Step1: 定义你的CSS类名
想象一下,在一段时间内,上面图像中显示的五个页面荐是使用像下面的HTML代码构建的:
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站栏目:详解在Vue中有条件地使用CSS类-创新互联
文章起源:http://myzitong.com/article/ephdo.html