面试题：Svelte中如何动态管理类名

Question

在Svelte项目中，假设你有一个按钮元素，根据按钮是否被点击来切换按钮的类名（一个是默认样式类名，一个是点击后特殊样式类名），请用代码示例展示如何实现。

Answer 1

<script>
    let isClicked = false;
    const defaultClass = 'default - style';
    const clickedClass = 'clicked - style';

    function handleClick() {
        isClicked =!isClicked;
    }
</script>

<button class={isClicked? clickedClass : defaultClass} on:click={handleClick}>
    {isClicked? '已点击' : '点击我'}
</button>

上述代码中，首先在<script>标签内定义了一个布尔变量isClicked来记录按钮是否被点击，同时定义了默认样式类名defaultClass和点击后特殊样式类名clickedClass。handleClick函数用于切换isClicked的值。在按钮元素中，通过class属性结合三元表达式根据isClicked的值来决定应用哪个类名，同时通过on:click绑定点击事件到handleClick函数。