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 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
vue @ ~ 相对路径 路径别名设置方式
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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
php 调用远程url的六种方法小结
2009/11/02 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
php把session写入数据库示例
2014/02/26 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
JavaScript类库D
2010/10/24 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
js使用递归解析xml
2014/12/12 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
Python中针对函数处理的特殊方法
2014/03/06 Python
Python素数检测的方法
2015/05/11 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
Python 将pdf转成图片的方法
2018/04/23 Python
python实现动态创建类的方法分析
2019/06/25 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
详解python tkinter 图片插入问题
2020/09/03 Python
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
房地产营销活动策划方案
2014/09/15 职场文书
2014年库房工作总结
2014/11/26 职场文书
2015年植树节活动总结
2015/02/06 职场文书
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python