当前位置: 首页 > 编程笔记 >

aurelia 绑定样式

沙海
2023-03-14
本文向大家介绍aurelia 绑定样式,包括了aurelia 绑定样式的使用技巧和注意事项,需要的朋友参考一下

示例

使用Aurelia绑定到浏览器本机style属性。如果使用字符串插值,则应使用css别名,以便样式在Internet Explorer中起作用。

样式字符串

export class MyViewModel {
  constructor() {
   this.styleString= 'color: #F2D3D6; background-color: #333';
  }
}
<template>
  <div style.bind="styleString"></div>
</template>

样式对象

export class MyViewModel {
  constructor() {
   this.styles= {color: '#F2D3D6', 'background-color': '#333'};
  }
}
<template>
  <div style.bind="styles"></div>
</template>

字符串插值

与上面的字符串绑定非常相似,这使您可以使用字符串插值来绑定到样式。如果任何值更改,它们将在视图中进行相应更新。

注意:为了与Internet Explorer兼容,我们使用别名css来绑定样式。这样可以确保在Internet Explorer中进行字符串插值。

export class MyViewModel {
    color = 'red';
    height = 350;
    width = 350;
}
<template>
    <div css="width: ${width}px; height: ${height}px; color:${color}">My Text</div>
</template>

           

 类似资料:
  • 本文向大家介绍aurelia 绑定到复选框,包括了aurelia 绑定到复选框的使用技巧和注意事项,需要的朋友参考一下 示例 基本复选框 带有对象数组的复选框 带有布尔值的复选框            

  • 本文向大家介绍aurelia 绑定到选择元素,包括了aurelia 绑定到选择元素的使用技巧和注意事项,需要的朋友参考一下 示例 字符串数组 在选择下拉列表中选择一个值并提供字符串数组时,所选值将作为字符串绑定到选择元素的value属性,我们可以使用字符串插值显示该字符串。 对象数组 与上面的示例不同,当提供对象数组时,在下拉列表中选择一个值时,绑定到该特定选项的模型就是所提供的对象。      

  • 本文向大家介绍aurelia 绑定到文件输入,包括了aurelia 绑定到文件输入的使用技巧和注意事项,需要的朋友参考一下 示例            

  • 本文向大家介绍aurelia 绑定到无线电输入,包括了aurelia 绑定到无线电输入的使用技巧和注意事项,需要的朋友参考一下 示例 基本收音机 带对象阵列的收音机 带布尔的收音机            

  • 主要内容:Vue.js class,class 属性绑定,实例 1,实例 2,实例 3,实例 4,实例 5,实例 6,,Vue.js style(内联样式),实例 7,实例 8,实例 9Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。 Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。 class 属性绑定 我们可以为

  • 主要内容:Vue.js class,class 属性绑定,实例 1,实例 2,实例 3,实例 4,实例 5,实例 6,,Vue.js style(内联样式),实例 7,实例 8,实例 9,组件上使用 class 属性,实例 10,实例 11Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。 v-bind 在处理 class 和 style 时, 表达式除了可以使用字符串之外,还可以是对象或数组。 v-bi