首页 > 其他分享 >类与样式绑定

类与样式绑定

时间:2023-04-22 21:26:55浏览次数:66  
标签:return 样式 绑定 对象 data class isActive

Class与Style绑定

Vue专门为class和style的v-bind用法提供了特殊的功能增强,除字符串外,表达式的值也可以是对象或数组

绑定HTML class

可以给 :class(v-bind:class缩写)传递一个对象来动态切换class

<div :class="{ active: isActive }"></div>

这里是一个布尔值绑定,active是否存在取决于isActive的真假值

可以在对象中写多个字段来操作多个class,此外:class指令也可和一般的class属性共存

如下例:

data() {
  return {
    isActive: true,
    hasError: false
  }
}

配合以下模板

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

渲染的结果为:

<div class="static active"></div>

当isActive或者hasError改变时,class列表会随之更新

绑定一个对象:

data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}
<div :class="classObject"></div>

绑定一个返回对象的计算属性

这是一个常用的技巧

data() {
  return {
    isActive: true,
    error: null
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}
<div :class="classObject"></div>

绑定数组

可以给:class绑定一个数组来渲染对个CSS class

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}
<div :class="[activeClass, errorClass]"></div>

如果想有条件地渲染某个class, 可以使用三元表达式

<div :class="[isActive ? activeClass : '', errorClass]"></div>

当然,当有多个依赖条件时class会有些冗长,因此也可以在数组中嵌套对象

<div :class="[{ active: isActive }, errorClass]"></div>

 

绑定内联样式

:style支持绑定js对象值,对应的是HTML的style属性

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

推荐使用上述 camelCase驼峰命名法,当然也支持下述kebab-cased短横线形式

<div :style="{ 'font-size': fontSize + 'px' }"></div>

直接绑定一个对象

data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}

<div :style="styleObject"></div>

同样当央视对象需要复杂的逻辑,可以使用返回样式对象的计算属性

绑定数组

可以给:style绑定一个包含多个样式对象的数组

<div :style="[baseStyles, overridingStyles]"></div>

 

标签:return,样式,绑定,对象,data,class,isActive
From: https://www.cnblogs.com/zmhz/p/17343973.html

相关文章

  • 博客园页面展示--前端及样式代码
    这是一个博客园的首页面的展示前端代码和样式代码样式代码CSS采用外部链接,建好文件直接复制运行vscode即可,话不多说,直接上代码<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Mickey-博客园</title><linkrel="stylesheet&q......
  • 微信小程序-小程序事件绑定
    什么是事件事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息,如id,dataset,touches。常见事件tap:手指触摸后马上离开longpress:手指触摸后,超过350ms......
  • 在js中修改less文件内样式
    title:"在js中修改less文件内样式"date:2023-04-21T22:51:58+08:00tags:["React","less","JavaScript"]categories:["前端篇"]在项目中使用使用进度条时遇到了一点问题,根据需求进度条的百分比需要在条内显示,但是当完成度太低时由于进度条背景和百分比值都是接近的颜......
  • 网页滚动条样式修改
    title:网页滚动条样式修改date:2022-12-2116:03:45tags:['Css']categories:["前端篇"]修改网页中侧边滚动条可以对如下几方面进行修改::-webkit-scrollbar:滚动条整体::-webkit-scrollbar-thumb:可拖拽区域::-webkit-scrollbar-track:滚动条轨道::-webkit-scrollba......
  • EasyExcel格式化映射注解和样式注解详解
     https://blog.csdn.net/qq_44749491/article/details/127879946一、概述使用注解很简单,只要在对应的实体类上面加上注解即可。也就是说使用实体类模型来读写Excel文件时,可以通过注解来控制实体类字段和Excel列之间的对应关系。二、ExcelProperty2.1作用ExcelProperty注解用......
  • drf之定制返回样式SerializerMethodField与在表模型中定制
    SerializerMethodField定制返回的样式为person:{name:xxx,age:xxx}或person:[{name:xxx,age:xxx},{name:yyy,age:yyy}...]等,就可以使用到SerializerMethodField语法在序列化类中进行定义序列化字段名=serializers.SerializerMethodField()defget_序列化字段名(self......
  • css样式 进行的瀑布流玩法
    简单归简单布局还是需要自己造的我是创建了n个相同内容就是换图片<divclass="modulee-content-2"><divclass="content-list"><divclass="aaa"v-for="iteminlineDataList":key="item.id"@click="toDetail(it......
  • 交换机链路聚合与多网卡绑定(bond)
    概念介绍bonding是linux内核自带的模块,它能将Linux系统的多个网卡绑定为一个逻辑端口,同时对外提供一个统一的IP地址,目前bonding模块的工作模式共有七种mode(0~6)mode介绍mode0,(balance-rr)轮询均衡传输数据包顺序是多个网卡轮询传输,可能会出现乱序数据包需要重传。......
  • 01-CSS中的非布局样式
    title:01-CSS中的非布局样式publish:true前言CSS中,有很多非布局样式,这些样式(属性)和与布局无关,包括:字体、字重、颜色、大小、行高背景、边框滚动、换行装饰性属性(粗体、斜体、下划线)等。这篇文章,我们来对上面的部分样式做一个回顾。边框如何用边框画一个三角形?详见......
  • 延迟绑定与 ret2dlresolve 详解
    ret2dlresolve是栈溢出下的一种攻击方法,主要用于程序没有办法利用puts、printf、writer函数等泄露程序内存信息的情况。延迟绑定在Linux中,为了程序运行的效率与性能,在没有开启FULLRELRO时候,程序在第一次执行函数时,会先执行一次动态链接,将对应函数的got表填上libc......