集团官网
  • 国家级全民数字素养与技能培训基地
  • 河南省第一批产教融合型企业建设培育单位
  • 郑州市数字技能人才(码农)培养评价联盟

HTML中为元素绑定Class属性与Style样式

编辑:云和数据 日期:2023-03-14 17:44

在实际开发中经常会遇到动态操作元素样式的需求。因此,vue 允许开发者通过 v-bind 属性绑定指令,为元素动态绑定 class 属性的值和行内的 style 样式。

1. 动态绑定 HTML 的 class

可以通过三元表达式,动态的为元素绑定 class 的类名。示例代码如下:

MyDeep组件Toggle Italicdata() {  return { isItalic: true }}.thin{ // 字体变细  font-weight:200;}.italic{ // 倾斜字体  font-style: italic;}

2. 以数组语法绑定 HTML 的 class

如果元素需要动态绑定多个 class 的类名,此时可以使用数组的语法格式:

  MyDeep 组件Toggle ItalicToggle Deletedata(){  return {    isItalic: true,    isDelete: false,  }}

3. 以对象语法绑定 HTML 的 class

使用数组语法动态绑定 class 会导致模板结构臃肿的问题。此时可以使用对象语法进行简化:

MyDeep 组件Toggle ItalicToggle Deletedata(){  return {    classobj:{ //对象中,属性名是class 类名,值是布尔值      italic: true,      delete: false,    }   }}

4. 以对象语法绑定内联的 style

:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名:

黑马程序员
字号 +1字号 -1data() {  return {    active: 'red',    fsize: 30,    bgcolor:'pink',  }}

相关内容

String类型的常见命令有哪些? String类型,也就是字符串类型,是Redis中最简单的存储类型。其value是字符串,不过根据字符串的格式不同,又可以分为3类:string是普通字符串,int整数类型,可以做自增、自减操作,float浮点类型,可以做自增、自减操作。String的常见命令有:SET:添加或者修改已经存在的... 通过form表单提交数据存在哪些缺点? HTML中的<form>标签,就是用于采集用户输入的信息,并通过<form>标签的提交操作,把采集到的信息提交到服务器端进行处理。通过点击 submit 按钮,触发表单提交的操作,从而使页面跳转到 action URL 的行为,叫做表单的同步提交。表单同步提交存在两个缺... 现在的就业环境回暖了吗 最近上网时,发现很多友友都在问一个艾瑞巴蒂都关心的问题:“当前就业环境回暖了吗?”有的人根据自己的经历,觉得最近猎头和HR的电话明显增多;也有人通过观察网络上的信息,发现求职者们分享的选择工作机会的帖子逐渐增多;还有人表示自己已经预约了面试并且成功拿到了 offer……... 新手起步理解group by 在 MySQL 中,GROUP BY用于将具有指定列中相同值的行分组在一起,允许对数据进行分类和聚合,即按照指定的字段或者表达式进行分组。我们现在有一个简单的表student,内容如下表1所示:对于上面这个表,我们要求查询每个班几个人?答案是:select class,count(c... Windows资源性能常用计数器及参考值 Processor%Process TimeCPU的使用率:该计数器最为常用,可以查看处理器是否处于饱和状态,如果该值持续超过95%,就表示当前系统的瓶颈为CPU,可以考虑增加一个处理器或更换一个性能更好的处理器。(参考值:<80%)Processor Queue Length... 今年的就业情况,还能学前端吗? 今年,经济形势低迷,让就业市场遭遇了前所未有的挑战,这也让许多人对于是否投身互联网行业产生了疑虑。无论是赚钱、企业经营、找工作、升职加薪,还是生活本身,都变得越来越困难,一系列的问题仍层出不穷,公司倒闭,大批人面临失业风险,普通人消费力不足,年轻人看不到未来…众所周知,互联网行业具...
×