有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue 动态添加class(vue.js 动态绑定class的几种方式)

vue 炮渣日记 3周前 (11-16) 57次浏览 已收录 0个评论 扫描二维码

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>

如图:

vue 动态添加class(vue.js 动态绑定class的几种方式)

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

如图:

vue 动态添加class(vue.js 动态绑定class的几种方式)

image

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

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

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

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址