详解在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 相关文章推荐
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 Javascript
js实现盒子拖拽动画效果
Aug 09 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小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
JavaScript类的写法
2016/09/17 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
老生常谈python中的重载
2018/11/11 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
python判断变量是否为列表的方法
2020/09/17 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
实习证明格式范文
2014/10/14 职场文书
先进班集体事迹材料
2014/12/25 职场文书
教师读书笔记
2015/06/29 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android