Svelte是否促进动态CSS样式？

svelte

2017-07-26 50 views 0 likes

在Svelte中，如何根据组件状态在元素上更改类？Svelte是否促进动态CSS样式？

例如，您可能希望在特定条件下将某个类应用于某个按钮，如下例所示。

<button class="{{class}}">

眼下，这可以通过创建一个computed property这将返回类名称，或者空字符串，在一定条件下实现的。

但是，我担心这是否会污染计算的属性名称空间。例如，如果有status，则可能需要设置动态文本（如statusMessage）和类别（如statusClass）。

有没有更好的方法来做到这一点，或计算属性的方式去？对Svelte计划的CSS有更明确的支持吗？

来源

2017-07-26 Chris Talman

回答

您可以使用内嵌式，像这样：

<button class='{{active ? "active": "inactive"}}'> 
    {{active ? 'Selected' : 'Select this'}} 
</button>

这通常比使用计算性能更好，因为它是不清楚什么可能的值是只要看一眼的模板。

您还可以使用辅助函数，如果表达式会变得笨拙 - 在某些情况下，你可能会喜欢这些以计算值：

<button class='{{getClass(status)}}'>{{getText(status)}}</button> 

<script> 
    export default { 
    helpers: { 
     getClass(status) { 
     // ... 
     }, 
     getText(status) { 
     // ... 
     } 
    } 
    }; 
</script>

来源

2017-07-26 12:38:40

Svelte是否促进动态CSS样式？

回答

相关问题