vue.js 动态绑定class的几种方式_honey缘木鱼的博客-程序员秘密

Vue.js 的核心是一个响应的数据绑定系统，它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的DOM 将与数据保持同步，每当数据有改动，相应的DOM视图也会更新。基于这种特性，通过vue.js动态绑定class就变得非常简单。

思路：以某一页面样式需要单独适配iphonex为例

方式一.对象的形式 （第一个参数类名，第二个参数：boolean值） :class="{'footer':isIphoneX}"

//某一页面适配iPhone X
<div class="bottom" :class="{'footer':isIphoneX}">
</div>

 data () {
    return {
      isIphoneX:false
    }
  },

 mounted () {
    if(window.screen.width==375&&window.screen.height==812){
      this.isIphoneX = true
    }

渲染后的

渲染后的HTML:
<div class="bottom footer">
</div>

如图：

优点：以对象的形式可以写多个，用逗号分开 <div :class="{'p1' : false, 'p': true}"></div>

方式二.三元表达式(放在数组中，类名要用引号) :class="[isIphoneX ? 'bottom' : 'footer']"

//某一页面适配iPhone X
<div :class="[isIphoneX ? 'bottom' : 'footer']">
</div>

渲染后：

渲染后的HTML:
<div class="footer">
</div>

如图：

方式三.动态数组里的变量 :class="[isTrue, isFalse]"

//某一页面适配iPhone X
<div :class="[{'footer':isIphoneX} , 'bottom']">
</div>

渲染后和方法一是一样的。vue数据和class都符合双向绑定的规则！

简书地址：https://www.jianshu.com/u/995088b0c656

本文链接：https://blog.csdn.net/dt1991524/article/details/85131851

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

python使用pyqt多线程来显示视频_pyqt 显示视频_雅痞匪徒(Nike)的博客-程序员秘密

在正式开始之前，得说几句感想，在最初学python的时候，对于多线程多进程，只有一个概念以及知道大概怎么用，但是什么情况下使用多线程，什么情况下使用多进程，我对这个概念还不是很清晰，正好前一个月左右做了个项目，在这个项目中，我使用了多线程来在界面上显示视频，今天想了想，还是写上这个，用于以后自己看或者给其他有兴趣的朋友看。使用的技术：python + pyqt + opencv在使用pyqt的...

svn 部分命令_weixin_34413802的博客-程序员秘密

为什么80%的码农都做不了架构师？>>> ...

opengl作业三维虚拟场景_乱弹OpenGL选择-拾取机制_weixin_39890517的博客-程序员秘密

无论是游戏还是VR，三维世界总免不了与用户的交互。而这其中常也免不了“用户对场景中物件的选择（也就是，拾取）”这种需求。OpenGL本身就内置有一套拾取机制，这次就乱弹一下吧。（乱弹不少了哦~）——ZwqXin.comOpenGL内置的拾取方法，应该是第三次要接触了。头次是课程作业，套例子糊里糊涂弄成功了；第二次是去年9月，做一个DEMO，实现起来终于遇到了诸多麻烦，好不容易通过艰辛调试得到了正确...

高斯消元法解线性方程--Java实现_郑小源的博客-程序员秘密

我想当你看到这篇文章的时候，已经对高斯消元法进行了一些了解了，如果还有不明白的地方，请大家自行百度，我就不在这叙述高斯消元法的求解过程了。刚开始想实现高斯消元的时候，想的比较简单，就是将每个系数存成int型，实现过程如下package com.zly.base;import java.util.Iterator;import java.util.Scanner;public cl

【一起学UniGUI】--UniGUI的窗体和模块(8)_gz_SkyWin的博客-程序员秘密

(六)、数据模块(DataModules)： uniGUI支持向项目中添加数据模块(DataModules)。它允许开发人员像标准VCL应用程序那样设计他们的应用程序，将应用程序业务逻辑划分为几个数据模块。需要记住的重要一点是，虽然uniGUI数据模块与标准VCL数据模块在本质上是相同的，但是当使用uniGUI向导创建它们时，它们将为每个会话自动管理(其生存期将与会话本身相同)。如...

oracle 时区转换_Oracle中的时区转换_cxygs5788的博客-程序员秘密

oracle 时区转换大家好，在下面找到一些有关oracle中时区转换的有用信息。希望这对他们中的许多人有所帮助，因为我们工作的所有实时项目都遵循不同的时区（EST，PST等），因此您可能需要根据需要将它们转换为特定的内容： insertintodatesvalues(6,to_date('09/20/0523:15','MM/DD/YYHH24:MI'));...