vue绑定class的三种方法


Posted in Vue.js onDecember 24, 2020

一、对象语法

1、给v-bind:class 设置一个对象,可以动态地切换class,例如:

<div id="app">
  <div :class="{'active':isActive}"></div>
</div>
<script>
var app = new Vue({
  el:'#app',
  data:{
    isActive:true
  }
})
</script>

最终渲染结果:

<div class="active"></div>

2、对象中也可以传入多个属性,来动态切换class。另外,:class可以与普通class共存,例如:

<div id="app">
  <div class="static" :class="{'active':isActive,'error':isError}"></div>
</div>
<script>
var app = new Vue({
  el:'#app',
  data:{
    isActive:true,
    isError:false
  }
})
</script>

最终渲染结果(当数据isActive或isError变化时,对应的class也会更新):

<div class="static active"></div>

3、当:class的表达式过长或逻辑复杂时,还可以绑定一个计算属性,这是一种友好和常见的用法,一般当条件多于两个时,都可以使用data或者computed,例如:

<div id="app">
  <div :class="classes"></div>
</div>
<script>
var app = new Vue({
  el:'#app',
  data:{
    isActive:true,
    isError:null
  },
  computed:{
    classes(){
      return {
        active:this.isActive && !this.error,
        'text-fail':this.error && this.error.type ==='fail'
      }
    }
  }
})
</script>

除了计算属性,也可以直接绑定一个Object类型的数据,或者使用类似计算属性的methods.

二、数组语法

1、当需要应用多个class时,可以使用数组语法,给:class绑定一个数组,应用一个class列表:

<div id="app">
  <div :class="[atvieCls,errorCls]"></div>
</div>
<script>
var app = new Vue({
  el:'#app',
  data:{
    atvieCls:'active',
    errorCls:'error'
  }
})
</script>

渲染后的结果为:

<div class="active error"></div>

2、使用三元表达式,根据条件切换class(当数据isActive为真时,样式active才会被应用):

<div id="app">
  <div :class="[isActive ? activeCls : '',errorCls]"></div>
</div>
<script>
var app = new Vue({
  el:'#app',
  data:{
    isActive:true,
    atvieCls:'active',
    errorCls:'error'
  }
})
</script>

渲染后的结果为:

<div class="active error"></div>

3、class有多个条件时,这样写较为烦琐,可以在数组语法中使用对象语法:

<div id="app">
  <div :class="[{'active':isActive},errorCls]"></div>
</div>
<script>
var app = new Vue({
  el:'#app',
  data:{
    isActive:true,
    errorCls:'error'
  }
})
</script>

4、与对象语法一样,也可以使用data、computed、method三种方法,以计算属性为例:

<div id="app">
  <button :class="classes"></button>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      size: 'large',
      disabled: true
    },
    computed: {
      classes: function () {
        return [
          'btn',
          {
            ['btn-'+this.size]: this.size!=='',
            ['btn-disabled']: this.disabled,
          }
        ]
      }
    }
  })
</script>

渲染后的结果为:

<div class="btn btn-large btn-disabled"></div>

以上,样式btn会始终应用,当数据size不为空时,会应用样式前缀btn-,后加size的值;当数据disabled为真时,会应用样式btn-disabled.

使用计算属性给元素动态设置类名,在业务中经常用到,尤其是在写复用的组件时,所以在开发过程中,如果表达式较长或逻辑复杂,应该尽可能优先使用计算属性。

三、在组件上使用

 如果直接在自定义组件上使用class或:class,样式规则会直接应用到这个组件的根元素上,例如声明一个简单的组件:

<script>
  Vue.component('my-component', {
    template: '<p class="article">一些文本</p>'
  })
</script>

然后在调用该组件时,使用对象语法或数组语法给组件绑定class,以对象语法为例:

<div id="app">
  <my-component :class="'active':isActive"></my-component>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      isActive: true
    }
  })
</script>

最终组件渲染后的结果为:

<p class="article active">一些文本</p>

这种方法仅适用于自定义组件的最外层是一个根元素,否则会无效,当不满足这种条件或需要给具体的子元素设置类名时,应当使用组件的 props 来传递。

以上就是vue绑定class的三种方法的详细内容,更多关于vue绑定class的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
如何实现vue的tree组件
Dec 03 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
全面解析Vue中的$nextTick
Dec 24 #Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 #Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 #Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 #Vue.js
详解Vue的异步更新实现原理
Dec 22 #Vue.js
Vue组件简易模拟实现购物车
Dec 21 #Vue.js
vue实现购物车的小练习
Dec 21 #Vue.js
You might like
php Ajax乱码
2008/04/09 PHP
PHP5常用函数列表(分享)
2013/06/07 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
python实现贪吃蛇小游戏
2020/03/21 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
详解Django admin高级用法
2019/11/06 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
道歉的话语大全
2015/05/12 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
《迟到》教学反思
2016/02/24 职场文书
2019个人半年工作总结
2019/06/21 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电
浅谈Python中对象是如何被调用的
2022/04/06 Python