加入收藏 插件商城
QQ咨询 官方微信

添加微信好友

 官方小程序

百度小程序

微信小程序

头条小程序

 关于我们
close
close
15137100750

vue教程

首页 > 前端框架 > vue教程 >

vue绑定class的三种方法

 shitouadmin  2023-09-23 19:55:40
一、对象语法
1、给v-bind:class 设置一个对象，可以动态地切换class，例如：
  1. <div id="app"> 
  2.   <div :class="{'active':isActive}"></div> 
  3. </div> 
  4. <script> 
  5. var app = new Vue({ 
  6.   el:'#app', 
  7.   data:{ 
  8.     isActive:true 
  9.   } 
  10. }) 
  11. </script> 
最终渲染结果：
  1. <div class="active"></div> 
2、对象中也可以传入多个属性，来动态切换class。另外，:class可以与普通class共存，例如：
  1. <div id="app"> 
  2.   <div class="static" :class="{'active':isActive,'error':isError}"></div> 
  3. </div> 
  4. <script> 
  5. var app = new Vue({ 
  6.   el:'#app', 
  7.   data:{ 
  8.     isActive:true, 
  9.     isError:false 
  10.   } 
  11. }) 
  12. </script> 
最终渲染结果（当数据isActive或isError变化时，对应的class也会更新）：
  1. <div class="static active"></div> 

3、当:class的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种友好和常见的用法，一般当条件多于两个时，都可以使用data或者computed，例如：
  1. <div id="app"> 
  2.   <div :class="classes"></div> 
  3. </div> 
  4. <script> 
  5. var app = new Vue({ 
  6.   el:'#app', 
  7.   data:{ 
  8.     isActive:true, 
  9.     isError:null 
  10.   }, 
  11.   computed:{ 
  12.     classes(){ 
  13.       return { 
  14.         active:this.isActive && !this.error, 
  15.         'text-fail':this.error && this.error.type ==='fail' 
  16.       } 
  17.     } 
  18.   } 
  19. }) 
  20. </script> 

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

二、数组语法
1、当需要应用多个class时，可以使用数组语法，给:class绑定一个数组，应用一个class列表：
  1. <div id="app"> 
  2.   <div :class="[atvieCls,errorCls]"></div> 
  3. </div> 
  4. <script> 
  5. var app = new Vue({ 
  6.   el:'#app', 
  7.   data:{ 
  8.     atvieCls:'active', 
  9.     errorCls:'error' 
  10.   } 
  11. }) 
  12. </script> 
渲染后的结果为：
  1. <div class="active error"></div> 
2、使用三元表达式，根据条件切换class（当数据isActive为真时，样式active才会被应用）：
  1. <div id="app"> 
  2.   <div :class="[isActive ? activeCls : '',errorCls]"></div> 
  3. </div> 
  4. <script> 
  5. var app = new Vue({ 
  6.   el:'#app', 
  7.   data:{ 
  8.     isActive:true, 
  9.     atvieCls:'active', 
  10.     errorCls:'error' 
  11.   } 
  12. }) 
  13. </script> 
渲染后的结果为：
  1. <div class="active error"></div> 
3、class有多个条件时，这样写较为烦琐，可以在数组语法中使用对象语法：
  1. <div id="app"> 
  2.   <div :class="[{'active':isActive},errorCls]"></div> 
  3. </div> 
  4. <script> 
  5. var app = new Vue({ 
  6.   el:'#app', 
  7.   data:{ 
  8.     isActive:true, 
  9.     errorCls:'error' 
  10.   } 
  11. }) 
  12. </script> 
4、与对象语法一样，也可以使用data、computed、method三种方法，以计算属性为例：
  1. <div id="app"> 
  2.   <button :class="classes"></button> 
  3. </div> 
  4. <script> 
  5.   var app = new Vue({ 
  6.     el: '#app', 
  7.     data: { 
  8.       size: 'large', 
  9.       disabled: true 
  10.     }, 
  11.     computed: { 
  12.       classes: function () { 
  13.         return [ 
  14.           'btn', 
  15.           { 
  16.             ['btn-'+this.size]: this.size!=='', 
  17.             ['btn-disabled']: this.disabled, 
  18.           } 
  19.         ] 
  20.       } 
  21.     } 
  22.   }) 
  23. </script> 
渲染后的结果为：
  1. <div class="btn btn-large btn-disabled"></div> 
以上，样式btn会始终应用，当数据size不为空时，会应用样式前缀btn-，后加size的值；当数据disabled为真时，会应用样式btn-disabled.

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

三、在组件上使用
如果直接在自定义组件上使用class或:class，样式规则会直接应用到这个组件的根元素上，例如声明一个简单的组件：
  1. <script> 
  2.   Vue.component('my-component', { 
  3.     template: '<p class="article">一些文本</p>' 
  4.   }) 
  5. </script> 
然后在调用该组件时，使用对象语法或数组语法给组件绑定class，以对象语法为例：
  1. <div id="app"> 
  2.   <my-component :class="'active':isActive"></my-component> 
  3. </div> 
  4. <script> 
  5.   var app = new Vue({ 
  6.     el: '#app', 
  7.     data: { 
  8.       isActive: true 
  9.     } 
  10.   }) 
  11. </script> 
最终组件渲染后的结果为：
  1. <p class="article active">一些文本</p> 
这种方法仅适用于自定义组件的最外层是一个根元素，否则会无效，当不满足这种条件或需要给具体的子元素设置类名时，应当使用组件的 props 来传递。
网站关键词 vue 绑定 class
￥ 打赏
×
如果您觉得文章帮助了您就打赏一下吧
非常感谢你的打赏，我们将继续分享更多优质内容，让我们一起创建更加美好的网络世界！

支付宝扫一扫打赏

微信扫一扫打赏

本文《vue绑定class的三种方法》发布于石头博客文章，作者：shitouadmin，如若转载，请注明出处：https://www.pweb123.com/frame/vue/983.html，否则禁止转载，谢谢配合!
上一篇：vue报错： Avoid mutating a prop directly since the value will be overwritten whenever the paren
下一篇：[Vue warn]: Property or method "xxx" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

您可能感兴趣

文章点评

我来说两句 已有0条评论
点击图片更换
登录 | 注册
phpcms小程序插件
dedecms小程序插件
pbootcms小程序插件
迅睿小程序插件
易优cms小程序插件
phpcms在线付费阅读插件（包含：支付宝支付模块+微信支付模块+付费阅读模块）
phpcms商城模块优化版上线
phpcms v9去掉phpsso修改方案，后台可以直接关闭
phpcms v9修改flash上传为h5上传（webuploader）
phpcms会员中心layui版
阅读排行

添加微信好友

热门栏目
首页 资讯 CMS教程 HTML基础 小程序 插件 SEO 模板
版权所有：郑州腾石网络科技有限公司 备案信息：豫ICP备18019117号-2
站长QQ：2863868475 业务合作咨询：15137100750(同微信)
本站所有投放的广告是有其他网站提供，不代表本站立场，同时网站首页广告位对外出租详情咨询本站站长！同时欢迎广大站长加入个人建站团队
网站地图 XML地图

添加微信好友

微信小程序

百度小程序