Bind Inline Styles

同学们，咱们今天来看看Lightning Web Components里如何处理样式，特别是内联样式，以及大家要养成的好习惯。 先记一个核心原则：，能用CSS类就不要用内联样式，。类可以复用，好维护，性能也更好。那什么时候用内联样式呢？只有当样式值是动态计算出来的，比如根据数据变动的宽度、颜色，才需要直接用内联样式。 好，那怎么写内联样式呢？在你的HTML模板里，给元素加一个`style`属性，然后绑定到组件JavaScript里的一个，getter函数，。这个getter要返回一个，CSS字符串，。 要注意三点： 第一，CSS属性名得用“烤肉串式”命名，也就是小写单词用连字符连接，比如`font-size`、`background-color`，不能写驼峰。 第二，多个样式规则之间用，分号，分隔，就像你正常写内联样式一样。所以返回的字符串就是这样：`"font-size: 20px; color: red;"` 第三，这个字符串完全是动态拼出来的，所以你可以根据组件里的数据算。 我举个最简单的父子组件例子：假如你有一个图表条子组件，宽度是父组件传过来的百分比。父组件计算好，比如`barWidth = 75`，传给子组件。子组件用一个getter，返回`width: ${this.percentage}%`这样的字符串，再绑定到`style`上，这个图表条就会根据数据伸缩了。这正是动态内联样式的好例子。 最后提醒大家，遵守MDN文档里关于全局`style`属性的规范，你写的CSS字符串必须合法。这样你的代码既规范又灵活。 记住了吗？优先用类，动态值才用内联样式，属性用烤肉串，拼接字符串用分号隔开。下课后可以自己写个简单的进度条组件练练手。