集团官网
  • 华为授权培训中心
  • 腾讯云一级认证培训中心
  • 百度营销大学豫陕深授权运营中心
  • Oracle甲骨文OAEP中心
  • Microsoft Azure微软云合作伙伴
  • Unity公司战略合作伙伴
  • 普华基础软件战略合作伙伴
  • 新开普(股票代码300248)旗下丹诚开普投资
  • 中国互联网百强企业锐之旗旗下锐旗资本投资

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',  }}

相关内容

如何针对接口设计测试用例 ? 当我们拿到一个接口,怎么才能设计出更好的测试用例呢?从大的方面我们至少要考虑到以下三个方面。第一:功能测试第二:性能测试第三:安全性测试一、功能方面在功能方面,我们要更多考虑的是如何通过不同的输入覆盖不同的业务逻辑。而这个业务逻辑也可以理解为代码的每一个分支语句,所以,我们的测试就变为如何通过... 怎样下载和安装HBuilder软件? HBuilder是一款深度集成Eelipse的IDE编辑器,但其主要集中在Web前端的开发,不能进行Java等后台开发。HBuilder提供了对JavaScrijpt、jQuery、HTML5+、MUI等语法的提示功能,同时包含很多快捷键,让前端开发更加便捷。访问HBuilder官方网站(ht... web前端框架有哪些?学web前端开发用什么软件? 框架是提供一套完整的解决方案,按照规定好的代码结构来做编排。前端框架一般指用于简化网页设计的框架,使用广泛的前端开发套件,主要特点易于控制,易于延展,易于分配资源。通常前端框架会封装了一些常用的功能,比如html文档操作、各种按钮,表单控件等。合理的运用前端框架可以降低界面开发周期、提升开发效... 性能测试常见指标有哪些 对业务指标的要求主要有:请求响应时间,最大并发量等等。对系统资源的指标,如:资源使用率是指在系统负载运行期间,数据库服务器,应用服务器,web服务器的cpu,内存,硬盘,外置存储,网络带宽的使用率,低于20%的使用率为资源使用稳定,60%-80%的使用率表示资源使用饱和,超过80%的使用率的资... 软件测试培训:边界值分析法 对于软件测试人员来说,测试工作做得越多越会发现,程序的一些错误往往发生在边界处理上,例如,某程序的输入数据要求取值范围为1~100,当取值在1~100内部时没有问题,然而取边界值1或100时会发生错误,这就是程序开发时对边界问题没有做好处理。边界值分析法就是对边界值进行测试的一种方法,本节将针... Web Storage是什么?Web Storage详解 Web Storag是HTML5引入的一个非常重要的功能,可以将数据存储在本地,如保存用户的偏好设置、复选框的选中状态、文本框默认填写的值等。用户在浏览器中刷新网页时,网页通过Web Storage就可以知道用户之前所做的一些修改,而不需要将用户修改的内容存储在服务器端。Web Storage...
×