Question

在Svelte,如何根据组成情况改变班级?

例如,如以下例子,你不妨在某些条件下向纽芬兰州申请一个班级。

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

现在,可以通过创建computed Property来做到这一点,这些财产将在某些条件下归还阶级名称或空壳。

然而,我担心这是否会污染计算出来的房地产名称空间。例如,如果有<代码>status,则可能希望两种文本都包含动态文本,如statusMessage和。



难道有更好的办法去做,还是把财产计算出来去做? 是否计划为Svelte提供更明确的支助?

Answer 1

你们也可以使用直线表达方式,如:

<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>

Answer 2

今天,你可以使用:

export let whitetext = false;
<div class:whitetext></div>

之后

<MyComponent whitetext={true} />

syntax,用于简单的真实/假冒课。

Answer 3


根据教学法:

<div class:active="{current ===  foo }">

如果情况确实恢复,则<代码>活性 增加了班级。

See: https://svelte.dev/tutorial/classes

Answer 4

在其他受欢迎的框架中,没有使用诸如<代码>{>#if}等条件的内在途径。

由于当你有两个以上班级时,网上表达就会变得无所作为,因此,我可以直言而.。班级建筑商助手的快速例子:

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)} >

Answer 5

参看:。

<script>
    let current =  foo ;
</script>

<style>a
    button {
        display: block;
    }

    .active {
        background-color: #ff3e00;
        color: white;
    }
</style>

<button
    class="{current ===  foo  ?  active  :   }"
    on:click="{() => current =  foo }"
>foo</button>

<button
    class="{current ===  bar  ?  active  :   }"
    on:click="{() => current =  bar }"
>bar</button>

<button
    class="{current ===  baz  ?  active  :   }"
    on:click="{() => current =  baz }"
>baz</button>

友情链接