vue 绑定动态样式

  1. class绑定就是通过"v-bind: class="表达式""来绑定动态类名样式的。v-bind 可以简化成冒号。表达式的值支持字符串、对象和数组3种类型。一个标签上静态class与动态class可以同时存在,最终编译后,Vue会将动态class与静态class合并,并指定为标签对象的class样式。

字符串写法 样式的类名不确定,需要动态指定

对象写法 要绑定的样式的个数确定、名字也确定,但要动态地决定是否使用 这里的对象的属性是类名 参数是true与false

数组写法 要绑定的样式的个数不确定、名字也不确定

2.与class绑定类似,,style绑定同样是通过"v-bind:style="表达式""来绑定动态style样式,表达式的值支持字符串、对象和数组3种类型,在实际开发中,一般使用对象类型的写法就够了

相关推荐
幼稚鬼_Blog2 小时前
可拖拽悬浮按钮组件支持vue3/vue2
前端·javascript·html
前端小怪兽zmy2 小时前
Vue3实现纯前端语音输入成文字显示
前端·javascript·elementui
ohyeah2 小时前
原子化 CSS 与 Fragment:现代前端开发的高效实践
前端
鱼鱼块2 小时前
告别重复传参!用柯里化提升代码优雅度
前端·javascript·面试
chilavert3182 小时前
技术演进中的开发沉思-274 AJax :Button
前端·javascript·ajax·交互
Robet2 小时前
static 和 lib/assets资源区别
前端·svelte
名字被你们想完了2 小时前
Flutter 实现一个容器内部元素可平移、缩放和旋转等功能(九)
前端·flutter
千寻girling2 小时前
面试官: “ 说一下你对 Cookie 的理解 ? ”
前端·后端
RedHeartWWW2 小时前
nextjs中,关于Layout组件和Page组件的认知
前端·react.js