svelte - 在用户选择值之前有条件地呈现占位符

Question

我正在尝试将占位符添加到自定义输入中，但我无法弄清楚如何有条件地显示输入值和占位符。

输入在没有占位符的情况下可以正常工作，但是当我添加占位符并选择一个值时，它不会更新，而是显示占位符。

因为占位符和值总是有一个值我不知道如何有条件地呈现这些

应用程序.svelte

<script>
  let placeholder = 'select a state' 
  let datas=['a','b','c']     
</script

<div>
   <CustomInput 
     placeholder={placeholder} 
   />
    {#each datas as data}
      <span class="drop__item" on:click={() => letter.state = data}>{data}</span>
    {/each}

</div>

customInput.svelte

<span>
 {#if placeholder.length >  0}
   {placeholder}
 {:else}
    {value}
 {/if}
</span>

标签： svelte

Answer 1

你有一个逻辑错误。如果你有一个值，请显示该值。如果您没有值，请显示占位符。

 {#if value}
   {value}
 {:else}
    {placeholder}
 {/if}

https://svelte.dev/repl/57158061ee6641b0bd466952464fb23f?version=3.20.1