Svelte学习笔记六：谈谈双向绑定的使用

表单元素的双向绑定

1. input受控绑定

使用bind关键字进行绑定，svelte通过bind关键字来完成类似v-model的双向绑定

• text

• checkbox

• number

• range

• select

{#each gender as gen, i}
    

    
    {gen.label}
    
{/each}

{#each hobbies as hobby, i}
  
  {hobby}
{/each}

3. 获得DOM元素

使用bind:this来绑定得到对应DOM元素对象，类似于react中的ref

经典例子： input外部控制聚焦

{inputRef.focus()}}>input聚焦

4. 自定义元素通过bind实现双向绑定

自定义一个带label的输入框，先

    {label}
    

父组件，通过bind:fVal来实现父组件的变量和内部input的双向绑定