svelte教程(6)数据绑定-阿里云开发者社区

开发者社区> sullay> 正文

svelte教程(6)数据绑定

简介: 双向数据绑定 双向绑定意味着当我们更改name的值时会更新input输入框的值,更改input输入框值的时候name的值同样会改变。 <script> let name = 'world'; </script> <input bind:value={name}> <h1>Hello {name}!</h1> 如果您有多个与同一个值相关的输入,则可以bind:group与value属性一起使用。
+关注继续查看

双向数据绑定

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

<script>
    let name = 'world';
</script>

<input bind:value={name}>

<h1>Hello {name}!</h1>

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

<script>
  let scoops=1
  let flavours = ['Mint choc chip'];
  let menu = [
        'Cookies and cream',
        'Mint choc chip',
        'Raspberry ripple'
    ];
</script>

<label>
    <input type=radio bind:group={scoops} value={1}>
    One scoop
</label>

<label>
    <input type=radio bind:group={scoops} value={2}>
    Two scoops
</label>

<label>
    <input type=radio bind:group={scoops} value={3}>
    Three scoops
</label>
<div>
{#each menu as flavour}
    <label>
        <input type=checkbox bind:group={flavours} value={flavour}>
        {flavour}
    </label>
{/each}
</div>

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

<script>
  let questions = [
    { id: 1, text: `Where did you go to school?` },
    { id: 2, text: `What is your mother's name?` },
    {
      id: 3,
      text: `What is another personal fact that an attacker could easily find with Google?`
    }
  ];
  let selected;
</script>

<select bind:value={selected}>
  {#each questions as question}
    <option value={question.id} label={question.text}></option>
  {/each}
</select>

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

的value值也可以是对象

<script>
  let questions = [
    { id: 1, text: `Where did you go to school?` },
    { id: 2, text: `What is your mother's name?` },
    {
      id: 3,
      text: `What is another personal fact that an attacker could easily find with Google?`
    }
  ];

    let selected;
</script>

<select bind:value={selected}>
  {#each questions as question}
    <option value={question} label={question.text}></option>
  {/each}
</select>

<p>The question is "{selected?selected.text:''}"</p>

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

<script>
  let questions = [
    { id: 1, text: `Where did you go to school?` },
    { id: 2, text: `What is your mother's name?` },
    {
      id: 3,
      text: `What is another personal fact that an attacker could easily find with Google?`
    }
  ];

  let selectedList = [];
</script>


<select bind:value={selectedList} multiple>
  {#each questions as question}
    <option value={question} label={question.text} />
  {/each}
</select>

{#each selectedList as selected}
   <p>The question is "{selected.text}"</p>
{/each}

contenteditable

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

<script>
  let html = "<p>Write some text!</p>";
  let text = "Write some text!";
</script>

<style>
  [contenteditable] {
    padding: 0.5em;
    border: 1px solid #eee;
    border-radius: 4px;
  }
</style>

<div contenteditable="true" bind:innerHTML={html} />

<div contenteditable="true" bind:textContent={text} />

<pre>{html}</pre>
<p>{text}</p>

循环中使用数据绑定

<script>
    let todos = [
        { done: false, text: 'finish Svelte tutorial' },
        { done: false, text: 'build an app' },
        { done: false, text: 'world domination' }
    ];

    function add() {
        todos = todos.concat({ done: false, text: '' });
    }

    function clear() {
        todos = todos.filter(t => !t.done);
    }

    $: remaining = todos.filter(t => !t.done).length;
</script>

<style>
    .done {
        opacity: 0.4;
    }
</style>

<h1>Todos</h1>

{#each todos as todo}
    <div class:done={todo.done}>
        <input
            type=checkbox
            bind:checked={todo.done}
        >

        <input
            placeholder="What needs to be done?"
            bind:value={todo.text}
        >
    </div>
{/each}

<p>{remaining} remaining</p>

<button on:click={add}>
    Add new
</button>

<button on:click={clear}>
    Clear completed
</button>

clientWidth、clientHeight、offsetWidth、offsetHeight

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

<script>
  let w;
  let h;
  let w2;
  let h2;
  let size = 42;
  let text = "edit me";
</script>

<style>
  input {
    display: block;
    margin: 20px auto;
  }
  div {
    display: block;
  }
  .inline {
    display: inline;
  }
</style>

<input type="range" bind:value={size} />
<input bind:value={text} />

<p>size: {w}px x {h}px</p>

<div bind:clientWidth={w} bind:clientHeight={h}>
  <span style="font-size: {size}px">{text}</span>
</div>

<p>line size: {w2}px x {h2}px</p>
<div bind:clientWidth={w2} bind:clientHeight={h2} class="inline">
  <span style="font-size: {size}px">{text}</span>
</div>

bind:this

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

<script>
  let w;
  let h;
  let w2;
  let h2;
  let size = 42;
  let text = "edit me";
  function getRects(){
    console.log(this.getClientRects())
    console.log(this.getBoundingClientRect())
  }
</script>

<style>
  input {
    display: block;
    margin: 20px auto;
  }
  div {
    display: block;
  }
  .inline {
    display: inline;
  }
</style>

<input type="range" bind:value={size} />
<input bind:value={text} />

<p>size: {w}px x {h}px</p>
<div
  on:click={getRects}
  bind:clientWidth={w}
  bind:clientHeight={h}>
  <span style="font-size: {size}px">{text}</span>
</div>

<p>line size: {w2}px x {h2}px</p>
<div
  on:click={getRects}
  bind:clientWidth={w2}
  bind:clientHeight={h2}
  class="inline">
  <span style="font-size: {size}px">
    {text}
  </span>
</div>

组件数据绑定

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

// Keypad.svelte
<script>
  import { createEventDispatcher } from "svelte";

  export let value = "";

  const dispatch = createEventDispatcher();

  const select = num => () => (value += num);
  const clear = () => (value = "");
  const submit = () => dispatch("submit");
</script>

<style>
  .keypad {
    display: grid;
    grid-template-columns: repeat(3, 5em);
    grid-template-rows: repeat(4, 3em);
    grid-gap: 0.5em;
    justify-content: center;
  }

  button {
    margin: 0;
  }
</style>

<div class="keypad">
  <button on:click={select(1)}>1</button>
  <button on:click={select(2)}>2</button>
  <button on:click={select(3)}>3</button>
  <button on:click={select(4)}>4</button>
  <button on:click={select(5)}>5</button>
  <button on:click={select(6)}>6</button>
  <button on:click={select(7)}>7</button>
  <button on:click={select(8)}>8</button>
  <button on:click={select(9)}>9</button>

  <button disabled={!value} on:click={clear}>clear</button>
  <button on:click={select(0)}>0</button>
  <button disabled={!value} on:click={submit}>submit</button>
</div>

// component_bind.svelte
<script>
    import Keypad from '../components/Keypad';

    let pin;
    $: view = pin ? pin.replace(/\d(?!$)/g, '•') : 'enter your pin';

    function handleSubmit() {
        alert(`submitted ${pin}`);
    }
</script>
<h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>

<Keypad bind:value={pin} on:submit={handleSubmit}/>

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9481 0
7 个基于CSS/JavaScript的鼠标悬停效果教程
鼠标悬停效果是网页制作的常用特效之一,早期使用Flash可以制作非常炫的效果,现在我们同样也可以使用CSS和JavaScript来实现。   本文中,我们将推荐一些非常不错的鼠标悬停特效教程,希望对大家有所帮助! 1.  Hover and Click Trigger for Circular Elements with jQuery 这个教程介绍如何使用jQuery处理一个真正的圆形元素的悬停效果,使用:hover实现悬停。
627 0
GitHub 使用教程
Github是一个源代码托管网站,功能强大,有桌面客户端,允许他人方便地为开源项目做修改。非常知名与流行。 注册、下载客户端 略。 创建仓库(项目) 免费用户只能创建Public权限。 图1 创建repository 网站建议每个项目要附有ReadMe文件、开源许可声明等。 图2: 命令行创建repository 创建后就可以添加文件了。   每个项目可以有多个
1053 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13163 0
+关注
18
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载