前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue.js 动态绑定class的几种方式

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

作者头像
honey缘木鱼
发布2018-12-27 15:30:40
6.4K0
发布2018-12-27 15:30:40
举报
文章被收录于专栏:娱乐心理测试

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

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

方式一.对象的形式(第一个参数 类名, 第二个参数:boolean值) :class="{'footer':isIphoneX}"

代码语言:javascript
复制
//某一页面适配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
    }

渲染后的

代码语言:javascript
复制
渲染后的HTML:
<div class="bottom footer">
</div>

如图:

image

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

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

代码语言:javascript
复制
//某一页面适配iPhone X
<div :class="[isIphoneX ? 'bottom' : 'footer']">
</div>

渲染后:

代码语言:javascript
复制
渲染后的HTML:
<div class="footer">
</div>

image.gif

如图:

image

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

代码语言:javascript
复制
//某一页面适配iPhone X
<div :class="[{'footer':isIphoneX} , 'bottom']">
</div>

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.12.20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档