首页 > 其他分享 >vue中class和style动态绑定

vue中class和style动态绑定

时间:2022-09-30 20:23:21浏览次数:47  
标签:style vue 绑定 数组 动态 class

使用v-bind指令可以给元素动态绑定class与style属性。

1、动态绑定class的三种方式

①直接绑定

②绑定对象

语法:{key(类名) :value(布尔值)}

③绑定数组

③三元运算符来条件实现

2、动态绑定style的两种方式

①绑定对象

②绑定数组

 

 

 

参考文章:https://www.jianshu.com/u/8dc931669e13

标签:style,vue,绑定,数组,动态,class
From: https://www.cnblogs.com/mahmud/p/16746007.html

相关文章

  • vue element-ui 基本使用和按需加载的2种方式(推荐安装插件的方式)
    element-ui官网:https://element.eleme.cn/#/zh-CN/component/installation 安装npminstallelement-ui-S不太清楚这里为什么是-S的朋友可以看看我的这篇文章......
  • node & vue
    更改npm镜像:npmconfigsetregistryhttps://registry.npm.taobao.org一般安装好node.js会默认把npm安装到C盘,以下是安装后如何更改位置npmconfigls查看npm路径设置......
  • SpringBoot+Vue社区团购系统 团购商城管理系统 商城购物系统Java Vue MySQL数据库 远
    ......
  • Arco Pro + Vite + vue3 + ts 动态引入组件
    有个需求是在组件中动态导入组件, 但vite自身对动态字符串形式的组件引入是有限制的, 以下写法会报错   官方文档中也对此有做说明   改为以下形式就不......
  • Vue3 + React18 + TS4 入门到实战
    前端项目开发,基本绕不开Vue+TS或React+TS,因此,这已经成为前端开发工程师日常需掌握的三大热门技术。本课程针对真正的初级前端同学而设,带大家系统地掌握3者目前新版......
  • 分享一个Vue实现图片水平瀑布流的插件
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助一.需求来源今天碰到了一个需求,需要在页面里,用水平瀑布流的方式,将一些图片进行加载,这让我突然想起我很久......
  • Ant Design Vue 在表格中插入图片
    这两天一直在用Antdv做一些小demo,今天在做表格的时候想在表格中插入图片,简单翻了下文档和国内的博客,发现所有的方法竟然都不好使,最后还是在官网的示例代码中看到相关的部......
  • Vue CLI 和 Vite
    一、VueCLI脚手架1.安装和使用1.1系统全局安装npminstall@vue/cli-g1.2升级VueCLI如果是比较旧的版本,可以通过下面的命令来升级npmupdate@vue/cli-g1.......
  • Vue插件
    Vue插件插件作用插件通常用来为Vue添加全局功能例如:1、添加全局资源:指令/过滤器/过渡等。如vue-touch2、通过全局混入来添加一些组件选项。3、添加Vue实例方法,......
  • Vue实现防抖
    data(){return{//用于保存防抖的定时器timeout:null,}}methods:{//防抖函数debounce(fn,delay){if(this.......