Vue.js样式-class属性绑定一个数组

黄菊华老师 2023-01-13 00:24:22

课时名称	课时知识点
Vue.js样式-class属性绑定一个数组	Vue.js样式-class属性绑定一个数组

...全文

267 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

v-bind 中支持绑定一个数组数组中activeClass和 errorClass对应为data中的数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .active { border: 1px solid...

操作元素的class列表和内联样式是数据绑定的一个常见需求，因为它们都是属性，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。因此，在将v-bind用于class和style时，Vue.js做了专门的增强，当在一个自定义的组件上使用class属性时，这些class将被添加到该组件的根元素上面。当v-bind:style使用需要添加浏览器引擎前缀的CSS属性时，如transform，Vue.js会自动侦测并添加相应的前缀。同样的，对象语法常常结合返回对象的计算属性使用。

vue3类与样式绑定

本文主要介绍如何利用Vue.js给元素绑定class样式，主要分为两种写法：分为对象写法和数组写法。为元素绑定class属性，对象的属性名为类名，值为false或true,true表示使用了该类，false表示未应用。下面的div和addBorder为自定义的类 2.数组写法为元素绑定class属性，数组的元素为实际的类名，写上则代表引用了该类，否则则未引用。下面的div1和addBorder1为自定义的类。 3.注意点（1）两者写法混用，如上述的div2所示，test类是通过对象的形式引入

给 v-bind:class 一个对象，以动态地切换 class： <div v-bind:class="{ active: isActive }"></div>  <div v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div> 这里类active是否生效取决于变量isActive值的真假当 is

黄菊华的课程社区_NO_7

1

社区成员

205

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章