详解在Vue中有条件地使用CSS类


Posted in Javascript onSeptember 30, 2017

很多时候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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a></li>
      <li class="page-item"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a></li>
      <li class="page-item active"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a></li>
      <li class="page-item"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a></li>
      <li class="page-item"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ 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-item 和 active 。值得注意的是,这些是步骤一中讨论的两个CSS类的名称。在步骤2中,这两个类引用已经成为JavaScript对象中的属性名。与这些属性名称关联的值是JavaScript表达式。如果表达式值为 true ,则将包括CSS类名。如果表达式值为 false ,则不包括CSS类。有了这些规则,我们来看看每个属性。

第一个属性 page-item 有一个 true 值。这个硬编码的值被使用,因为我们总是想要包括 page-item 类。第二个属性是 active ,它使用一个JavaScript表达式。当此表达式为 true 时,将应用 active 类。这使用我们可以根据 currentPage 的值有条件地应用 active 类。

body {
 width: 100vw;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

.pagination {
 justify-content: center;
}

每次修改 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ page }}</a>
      </li>
    </ul>
  </nav>
</div>

和上一个示例的区别就是类绑定上使用数组。这种替代方法需要在 data 对象中添加两个额外的属性。这两个属笥是 pageItemClass 和 activeClass 。更新Vue初始化的代码:

var app = new Vue({
  el: '#myApp',
  data: {
    totalPages: 5,
    currentPage: 3,
    pageItemClass: 'page-item',
    activeClass: 'active'
  }
});

正如你看到了, data 对象变了,虽然 data 对象大小变大了,但是使用数组语法时,模板中的代码稍微干净一些。对象语法更紧凑一些。

对象语法和数组语法之间的选择归结为个人爱好。

这两种方法都可能使你的HTML模板更加复杂。然而,实际上还有更多的事情发生。在实现中,我们正在关注如何分离。我们正在创建一个由数据驱动的模板。这使用的视图更容易测试,并且在应用程序变大时更容易维护。

总结

我希望你觉得这篇文章很有价值。如果你想了解更多关于Vue的知识。我希望你能看看我创建的 教程 。我相信你会发现它很有价值,不管你是刚学习Vue还是使用Vue工作了一段时间。如果你觉得有什么不对,或者有更好的经验或建议,欢迎在下面的评论中与我一起分享。

本文根据 @Chad Campbell 的《 Conditionally Applying a CSS Class in Vue.js 》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处: https://www.sitepoint.com/conditionally-applying-css-class-vue-js/ 。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
js实现弹框效果
Mar 24 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 #Javascript
vue按需引入element Transfer 穿梭框
Sep 30 #Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 #Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 #jQuery
JS设计模式之数据访问对象模式的实例讲解
Sep 30 #Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 #Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 #Javascript
You might like
基于php缓存的详解
2013/05/15 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
PHP 裁剪图片
2021/03/09 PHP
JavaScript的Cookies
2008/01/16 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
Python中的多重装饰器
2015/04/11 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
python得到电脑的开机时间方法
2018/10/15 Python
Form表单及django的form表单的补充
2019/07/25 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
学生手册家长评语
2014/02/10 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
刊首寄语大全
2014/04/11 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
驳回起诉裁定书
2015/05/19 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
服务器间如何实现文件共享
2022/05/20 Servers