详解在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继承方式实例
Oct 29 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
js读取cookie方法总结
Oct 31 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
js获取url传值的方法
Dec 18 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 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与XML的PDF文档生成技术
2006/10/09 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
javascript JSON操作入门实例
2010/04/16 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
vue.js实现标签页切换效果
2018/06/07 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
跟老齐学Python之复习if语句
2014/10/02 Python
python用来获得图片exif信息的库实例分析
2015/03/16 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
电子商务应届生自我鉴定
2014/01/13 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
村官2015年度工作总结
2015/10/14 职场文书
《我是什么》教学反思
2016/02/16 职场文书
创业计划书之干洗店
2019/09/10 职场文书
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang