Svelte支持动态CSS样式吗？
Svelte支持动态CSS样式吗？
提问于 2017-07-26 18:45:33
在Svelte中，类应该如何根据组件状态的元素进行更改？
例如，您可能希望在某些条件下将类应用于按钮，如下面的示例所示。
<button class="{{class}}">现在，这可以通过创建一个在特定条件下返回类名或空字符串的computed property来实现。
但是，我担心这是否会污染计算属性命名空间。例如，如果有一个status，可能需要同时设置一个动态文本(如statusMessage )和一个类(如statusClass )。
有没有更好的方法来做到这一点，或者计算属性是更好的方法？Svelte还计划对CSS提供更明确的支持吗？
回答 5
Stack Overflow用户
发布于 2017-07-26 20:38:41
您可以使用内联表达式，如下所示：
<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>Stack Overflow用户
发布于 2019-11-28 07:17:12
现在，您可以使用：
export let whitetext = false;
<div class:whitetext></div>然后
<MyComponent whitetext={true} />基于true/false的简单类的语法。
Stack Overflow用户
发布于 2018-07-18 18:53:41
根据其他流行的框架，没有内置的方式来使用，例如，class=中的条件{#if}。
因为一旦你有两个以上的类，内联表达式就会变得不奇怪，在这种情况下，我会直接使用helper。类生成器帮助器的快速示例：
helpers: {
getSlideClasses(index, currentIndex) {
let classes = ['js_slide']
if ( index === currentIndex ) {
classes.push('selected')
}
if ( index === 0 ) {
classes.push('first')
}
return classes.join(' ')
}
}然后：
<div class='{ getSlideClasses(index, currentIndex)}'>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45324684
复制相关文章
相似问题
腾讯云开发者
