vue关于动态绑定class的那些事

今天在写vue弹窗组件时，需要弹窗出来时不能点击除了弹窗之外的组件，需要用到css属性 pointer-events:none;这就需要我们动态的添加class，vue中尽量不要用js来添加class属性，会导致有时候页面刷新不出来，所以就在这整理了vue常见的几种动态的添加class的方法

vue动态绑定class的方式

一、绑定单个class

html部分：

<div :class="{'active':isActive}"></div>

js部分：通过isActive来判断是否添加active

data() {return {isActive: true};}

二、绑定多个class，需要逗号隔开

html部分：

<div class="activeOne" v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div>

js部分：判断是否绑定对应class

data() {return {isActive: true,hasError: true};}

三、绑定一个返回对象的计算属性

html部分：

<div :class="classObject"></div>

js部分:通过计算属性返回值来判断

export default {data() {return {isActive: true,};},computed: {classObject: function () {return {active: this.isActive,}}
}

四、通过三元运算符来选择需要的class

html部分:

<div :class="[isActive?'active':'disActive']"></div>

js部分：

 data() {return {isActive: false,};},

vue关于动态绑定class的那些事相关推荐

【Vue】—动态绑定v-bind
[Vue]-动态绑定v-bind
vue中动态绑定背景图, 图片水平垂直居中
vue中动态绑定背景图,并且使宽高不等的图片水平垂直居中外层父元素固定宽高,让图片垂直居中的方法 <div style="width:200px;height:200px;" ...
vue 中动态绑定class 和 style的方法
先列举一些例子 :class="['content',{'radioModel':checkType}]" :class="['siteAppListDirNode',{ ...
vue :class 动态绑定样式_Notes04vbind动态绑定class
点击二白夫人不许错过我 v-bind动态绑定class •••• 操作软件:Webstorm 插件:vue.js //从官网下载https://cn.vuejs.org/v2/guide/inst ...
掘金 AMA：听 Vue.js 作者--尤雨溪谈 Vue.js 独立开发设计那些事
第七期沸点,掘金团队请来了Vue.js 的作者,全职独立开源开发者尤雨溪做了为期三天的 Ask Me Anything (AMA) 活动(已结束). 我们在此精选了一些来自用户的提问及尤小右(尤雨溪 ...
关于Vue中动态绑定class和style的问题
一.需求今天碰到同事问了一个问题,根据后端返还的字段名字来绑定该名字的独有颜色,例如:'提现成功' --- 绿色.'提现失败' --- 红色. 她是这样写的::style=" ...
vue :class 动态绑定样式_Vue 在哪些方面做的比 React 更好？
在过去的五年中,我一直是一名 React 工程师.我爱React.我喜欢开发 React 应用程序.我认为它是目前最好的UI框架之一. 但是,在这个领域有一些竞争对手.其中最大的是 Vue.js . ...
vue项目token放在哪里_关于vue动态菜单的那点事
vue-element-admin4.0国内节点访问地址:https://panjiachen.gitee.io/vue-element-admin-site/zh/ 本此使用的是https://gi ...
Vue中动态绑定style样式写法
1. 动态绑定style样式注意点通过短横杠(-)连接的属性名都要转为驼峰形式,例:font-size要变成fontSize: 如果直接写样式属性的值,需要用引号引起来,例:fontSize: '1 ...

vue关于动态绑定class的那些事

vue动态绑定class的方式

一、绑定单个class

二、绑定多个class，需要逗号隔开

三、绑定一个返回对象的计算属性

四、通过三元运算符来选择需要的class

vue关于动态绑定class的那些事相关推荐

最新文章

热门文章