svelte教程（6）数据绑定

双向数据绑定

双向绑定意味着当我们更改name的值时会更新input输入框的值，更改input输入框值的时候name的值同样会改变。

Hello {name}!

如果您有多个与同一个值相关的输入，则可以bind:group与value属性一起使用。同一组中的单选框是互斥的；同一组中的复选框输入形成选定值的数组。

    
    One scoop



    
    Two scoops



    
    Three scoops


{#each menu as flavour}
    
        
        {flavour}
    
{/each}

我们还可以使用bind:value与元素绑定：

{#each questions as question} {/each}

The question is "{selected?questions.filter(q => q.id === selected)[0].text:null}"

的value值也可以是对象

  {#each questions as question}
    
  {/each}


The question is "{selected?selected.text:''}"

一个可以具有一个multiple属性，在这种情况下，它将绑定一个数组而不是一个值。

{#each questions as question} {/each} {#each selectedList as selected}

The question is "{selected.text}"

{/each}

contenteditable

具有contenteditable="true"属性的元素支持绑定textContent和innerHTML。

{html}
{text}

循环中使用数据绑定

Todos

{#each todos as todo}
    

        

        
    
{/each}

{remaining} remaining


    Add new



    Clear completed

clientWidth、clientHeight、offsetWidth、offsetHeight

这些属性为只读属性改变w、h的值不会更新元素。inline元素没有宽高。

size: {w}px x {h}px


  {text}


line size: {w2}px x {h2}px

  {text}

bind:this

bind:this可以拿到一个元素的引用。

size: {w}px x {h}px

  {text}


line size: {w2}px x {h2}px

  
    {text}
  

组件数据绑定

正如可以绑定到DOM元素的属性一样，也可以绑定到组件prop。

// Keypad.svelte





  1
  2
  3
  4
  5
  6
  7
  8
  9

  clear
  0
  submit


// component_bind.svelte

{view}

本教程的所有代码均上传到github有需要的同学可以参考 https://github.com/sullay/svelte-learn。