在Vue中有条件地使用CSS类

编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过伟德19463331开发的每一个技术干货。 点击链接查看最新伟德19463331内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。
很多时候Web在运行时要更改元素的CSS类名。但是在改变类名时,有时最好是有条件地应用样式。例如你有一个翻页的效果。翻页效果通常有一个高亮的效果,用于向用户显示当前页,这对于用户而言是很有帮助的。该项目的样式是有条件设置的,基于当前正在查看的页面。 翻页常见的一个效果看起来像下面这样: 在Vue中有条件地使用CSS类 在这个示例中,共有五页,每次只选择其中一个页面。如果你用Bootstrap构建一个分页器,那么所选的页面将有一个名为active的CSS类名应用在列表项中。如果页面是当前浏览的页面,那么你希望该类被应用。换句话说,你希望有条件地应用active类名。在Vue中,提供了一种方法,可以有条件地将CSS类应用于元素。在接下来的内容中将向大家展示这种技术。 要在运行时有条件地应用CSS类,需要绑定到一个JavaScript对象。要成功完成这个任务,必须完成两个步骤。首先,必须确保定义了CSS类名,然后在模板中创建类绑定。在本文的其他部分,我将详细解释这些步骤。

Step1: 定义你的CSS类名

想象一下,在一段时间内,上面图像中显示的五个页面荐是使用像下面的HTML代码构建的: <div id="myApp"> <nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="http://xxysy.com/#">1</a></li> <li class="page-item"><a class="page-link" href="http://xxysy.com/#">2</a></li> <li class="page-item active"><a class="page-link" href="http://xxysy.com/#">3</a></li> <li class="page-item"><a class="page-link" href="http://xxysy.com/#">4</a></li> <li class="page-item"><a class="page-link" href="http://xxysy.com/#">5</a></li> </ul> </nav> </div> 注意:这个代码片段中每个列表项li表示的就是每个页面。改元素引用了page-item类名。在这段代码中,使用的是Bootstrap的CSS框架。然而,如果没有定义,那么确保它在某个地方被定义了。不过,第二个CSS类是与本文最相关的类。 active的CSS类名用于标识当前选定的页面。在本文中,这个CSS类也是在Bootstrap框架中常用的。如上面的代码片段所示,active类只在第三个列表项元素中使用。你可能会猜到,这是你想有条件地应用的CSS类。要做到这一点,你需要添加一个JavaScript对象。

Step2: 绑定你的CSS类名

让我们重新构建步骤一中的代码。当在模板中创建类绑定时,有两个主要的选择:使用对象语法或使用数组语法。接下来的内容,我将向你展示如何使用这两种方法。

使用对象语法

要使用对象语法创建类绑定,必须使用JavaScript表达式。我们将使用的表达式可以在文中代码里可以看到。相关代码如下: <div id="myApp"> <nav aria-label="An example with pagination"> <ul class="pagination"> <li v-for="page in totalPages" v-bind:class="{'page-item':true, 'active':(page === currentPage)}"> <a class="page-link" href="http://xxysy.com/#">{{ page }}</a> </li> </ul> </nav> </div> 为了减少代码量,在这里使用了Vue中的v-for指令。这个指令用于在循环中渲染项目。这个例子中的项目就是页面本身。除了使用v-for指令之外,还使用了v-bind指令。 v-bind指令将元素的类属性绑定到Vue的实例。Vue的实例是这样定义的: var app = new Vue({ el: '#myApp', data: { totalPages: 5, currentPage: 3 } }); 这个Vue实例上面的data对象包括了一个名为currentPage的属性。如果你重新访问上面定义的HTML模板,你将注意到该避属性正在被引用。实际上,与每个类绑定相关的JavaScript对象看起来是这样的: {'page-item':true, 'active':(page === currentPage)} 该对象定义了两个属性:page-itemactive。值得注意的是,这些是步骤一中讨论的两个CSS类的名称。在步骤2中,这两个类引用已经成为JavaScript对象中的属性名。与这些属性名称关联的值是JavaScript表达式。如果表达式值为true,则将包括CSS类名。如果表达式值为false,则不包括CSS类。有了这些规则,我们来看看每个属性。 第一个属性page-item有一个true值。这个硬编码的值被使用,因为我们总是想要包括page-item类。第二个属性是active,它使用一个JavaScript表达式。当此表达式为true时,将应用active类。这使用我们可以根据currentPage的值有条件地应用active类。
每次修改currentPage的值,active就会应用其对应的列表项中。比如下图效果: 在Vue中有条件地使用CSS类 有条件地应用active类的另一种方法是绑定到一个数组。

使用数组语法

Vue允许通过绑定到一个数组给列表添加CSS类名。如果你想使用数组语法,步骤1中的HTML结构需要进行调整,修改后的代码如下: <div id="myApp"> <nav aria-label="An example with pagination"> <ul class="pagination"> <li v-for="page in totalPages" v-bind:class="[pageItemClass, (page === currentPage) ? activeClass : '']"> <a class="page-link" href="http://xxysy.com/#">{{ page }}</a> </li> </ul> </nav> </div> 和上一个示例的区别就是类绑定上使用数组。这种替代方法需要在data对象中添加两个额外的属性。这两个属笥是pageItemClassactiveClass。更新Vue初始化的代码: var app = new Vue({ el: '#myApp', data: { totalPages: 5, currentPage: 3, pageItemClass: 'page-item', activeClass: 'active' } }); 正如你看到了,data对象变了,虽然data对象大小变大了,但是使用数组语法时,模板中的代码稍微干净一些。对象语法更紧凑一些。效果如下:
对象语法和数组语法之间的选择归结为个人爱好。 这两种方法都可能使你的HTML模板更加复杂。然而,实际上还有更多的事情发生。在实现中,我们正在关注如何分离。我们正在创建一个由数据驱动的模板。这使用的视图更容易测试,并且在应用程序变大时更容易维护。

总结

我希望你觉得这篇文章很有价值。如果你想了解更多关于Vue的知识。我希望你能看看我创建的伟德1946网页版。我相信你会发现它很有价值,不管你是刚学习Vue还是使用Vue工作了一段时间。如果你觉得有什么不对,或者有更好的经验或建议,欢迎在下面的评论中与我一起分享。
本文根据@Chad Campbell的《Conditionally Applying a CSS Class in Vue.js》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:https://www.sitepoint.com/conditionally-applying-css-class-vue-js/

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等伟德19463331脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。
如需转载,烦请注明出处:https://www.w3cplus.com/vue/conditionally-applying-css-class-vue-js.html
返回顶部