VUE :class 动态class方法
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
vue官方文档对于class和style绑定有两种方法,对象语法和数组语法。
1.绑定 HTML Class对象绑定
我们用传给v-bind:class
一个对象,动态切换class 是否存在
<div v-bind:class="{ active: isActive }"></div> ;
//这里我们使用isActive
这个变量动态判断active
是否显示到html
vue对象里面
data: {isActive:true,//判断是否显示active这个class
}
页面渲染为:
<div class="active"></div>
当然我们也可以对象中传入更多属性来动态切换多个 class,此外,v-bind:class
指令也可以与普通的 class 属性共存。
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> 动态切换多个 class
</div>
vue对象里面
data: {isActive:true, hasError:false
}
页面渲染为:
`<div class="static active">` 动态切换多个 class`</div>`
对于上面v-bind:class
指令我们也可以传一个对象
<div v-bind:class="classObject">动态切换多个 class</div>
data: {classObject: { active: true,'text-danger': false}
}
页面渲染为:
<div class="active"> 动态切换多个 class</div>
对于动态class绑定我们也可以通过计算属性返回对象来动态判断class的绑定值
<div v-bind:class="classObject"></div>
data: {isActive: true,error: null
},
computed: {classObject: function () {return {active: this.isActive && !this.error,'text-danger': this.error && this.error.type === 'fatal'}
}
2.绑定 HTML Class数组语法
除了对象语法绑定class,我们还有一种方法是数组语法,我们可以把一个数组传给 v-bind:class。
<div v-bind:class="[activeClass, errorClass]"></div>
data: {activeClass: 'active',errorClass: 'text-danger'
}
页面渲染为
<div class="active text-danger"></div>
我们也可以通过三元表达式来进行判断切换class:
<div v-bind:class="[isActive ? activeClass : ' ', errorClass]"></div> ;
//这里判断是如果isActive 为true显示activeClass
,errorClass,否则只显示errorClass
对于class绑定当有多个条件 class 时这样写有些繁琐,在数组语法中也可以使用对象语法,例如如下写法:
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
VUE :class 动态class方法相关推荐
- vue v-html 动态内容样式无效解决方法
vue v-html 动态内容样式无效解决方法 参考文章: (1)vue v-html 动态内容样式无效解决方法 (2)https://www.cnblogs.com/mengfangui/p/122 ...
- vue 全局动态修改title、keywords、description;vue常用挂载的方法,自定义指令;
vue 全局动态修改title.keywords.description 路由: {path: "xxx",name: "xxx",component: () ...
- Vue 组件间通信方法汇总
Vue 组件间通信方法汇总 ⭐️ 更多前端技术和知识点,搜索订阅号 JS 菌 订阅 除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案.文章整理一下父子组件.兄弟组件.祖先后代组件间 ...
- php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
- Vue.js 动态为img的src赋值
在vue中动态给src赋值绑定图片会显示不出来 动态添加src被当做静态资源处理了,没有进行编译 解决方法: 1.用网络地址 把图片放在cdn或自己的服务器上,把网络地址存在imgUrl里,然后直接& ...
- vue将每个路由打包成html,Ant Design Vue pro 动态路由的实现和打包
Ant Design Vue pro 动态路由的实现和打包 Ant Design Vue pro 动态路由的实现和打包 配置路由权限 在config文件夹下router.config.js中配置路由权 ...
- Vue+Element动态生成新表单并添加验证
Vue+Element动态生成新表单并添加验证 首先,有这样一个需求,表单中默认有表单项,点击新增,会多出一项. 点击之后 官方文档中有写用v-for来实现新增表单,但是那是单表单的新增,现在多表单的 ...
- vue中动态获取dom元素进行操作
这几天我远程面试了一家公司,期间问题我都回答上来了 但有一个问题我很纳闷 就是你说下vue中获取dom元素的方法吧 我说大体上俩中吧 1.vue中 ref的方法 给元素起一个ref名称 通过 th ...
- vue的动态路由(登录之后拿到动态路由通过addRouters()动态添加路由)
登录后我们拿到路由动态路由,后端传的数据可能为这个 {path: '/index',meta: {title: '首页',icon: 'icon-shouye',tab_index: 0, //给头部 ...
最新文章
- 数据挖掘与机器学习介绍
- c++11の简单线程管理
- 如何得到通过GetOpenFileName选择的多个文件的文件名
- Oracle 11g服务器与客户端卸载、安装
- angular 字符串转换成数字_Python | 一文看懂Python列表、元组和字符串操作
- Linux下解压缩命令
- 最热门的10个Java微服务框架
- 异常 Failed to instantiate [java.util.List]: Specified class is an interface
- html布局文字设置,div css布局中css中文字体设置
- 190607每日一句
- 安卓studio加载HTML文件,Android Studio 加载本地Assets中的html文件
- 传智 刘意 2015年Java基础视频-深入浅出精华版 笔记 day24~day26(2016年4月26日13:11:30)
- 适合孩子观看的十部优国产儿童动画推荐清单!
- ObjectAnimator旋转动画
- 书小宅之概念汇总——胜读十年书
- shepp logan matlab,怎么用MATLAB生成一个三维的Shepp-Logan头骨模型并保存下来,谢谢了...
- 企业微信oauth认证_微信企业号OAuth2验证接口实例(使用SpringMVC)
- oracle 抓包工具,【转】抓包工具Wireshark详解(抓取IOS中APP的请求)
- 实时操作系统UCOS学习笔记5----UCOSIII移植
- springmvc拦截器 绝对路径