专栏首页娱乐心理测试vue.js 动态绑定class的几种方式

vue.js 动态绑定class的几种方式

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>

如图:

image

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

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

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

渲染后:

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

image.gif

如图:

image

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 解读mpvue官方文档的Class 与 Style 绑定及不支持语法

    在vue.js项目转化为小程序时,把原来页面的代码直接拷贝过去,发现布局改变很多,很多已经设置的标签的css样式并没有显示出来,查看官方文档,得知原来vue.j...

    honey缘木鱼
  • 九宫格抽奖转盘

    3.将此抽奖网址集成在APP上 因为我们的需求是转盘抽奖用h5写,然后将此网址用APP加载,APP在加载时传入Token,后台在抽奖接口中判断此人积分是否可用...

    honey缘木鱼
  • mint-UI上拉加载下拉刷新和fastclick冲突问题解决

    当我们的Vue项目为了解决IOS设备事件点击卡顿,300ms的延迟的问题,引入了fastclick后,会有很多小的冲突,例如在使用mint-UI实现上拉加载和下...

    honey缘木鱼
  • Django之ModelForm

      在前面有篇博客,我写了一个叫forms组件的东西,可以帮助我们完成校验数据、渲染标签功能和在前端页面局部刷新功能,功能封装的已经很好了,当时已经很开心了。但...

    py3study
  • websocket 原

         WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。   

    尚浩宇
  • 在线商城项目05-利用mock数据进行渲染和图片懒加载

    既然我们已经能从mock服务器拿到mock数据,现在的任务就是用拿到的数据进行页面渲染,另外,由于页面的图片数据太多,为了提高性能,我们会使用图片懒加载。本篇我...

    love丁酥酥
  • 基于django的个人博客网站建立(四)

    今天主要添加了留言与评论在后台的管理和主页文章的分页显示,文章类别的具体展示以及之前预留链接的补充

    py3study
  • 搜索框自适应大小 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • 基于vue2.0+vuex+localStorage开发的本地记事本

    本项目是使用vue-cli脚手架生成的项目,项目代码可以到我的github上clone下来。clone下来之后可进入文件目录

    IMWeb前端团队
  • 基于vue2.0+vuex+localStorage开发的本地记事本

    本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本。兼容PC端和移动端。 在线预览地址:DEMO 功能...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券