svelte框架案例教学新手版本绑定事件(第二章)

官网:

数据通常从父级流到子级。 bind: 指令允许另一种方式存在，即从子对象流向父对象，在大多数情况下用于绑定特殊标签。

最常见的绑定反映其属性的值，例如 input.value。

我们来写一些这些案例,或者理解一些这些东西

<input bind:value={value}/>

这是我们绑定的值,当然你可以在

<script>

    let value='10'

</script>

页面就可以显示这么一句话,请输入内容,好玩吧!

另外就是,我们也可以说,我们可以通过这个去整

<input placeholder="请输入内容"/>

这个是标签自带的属性

我们配合按钮做一些事件的写法

<script>

    let value=10

    function handleClick(e){

        if(value>=10){

            alert('你好,欢迎学习svelet')

        } else {

            return -1

        }

    }

</script>

<main>

    <p>{name}元</p>

    <input bind:value={value} placeholder="请输入内容"/>

    <button on:click="{handleClick}">增加</button>

</main>

我们经常会遇到select下拉框,我们也来看看处理方式

<select bind:value={selected}>
	<option value={a}>a</option>
	<option value={b}>b</option>
	<option value={c}>c</option>
</select>

 比如说我可以这样来获取值

<select bind:value={select} >

        <option value={a}>{a}</option>

        <option value={b}>{b}</option>

        <option value={c}>{c}</option>

    </select>

这样a,b,c都是同样的

当然在同样的情况下,你也可以可以不写

接下来就是谈谈拿下标index的事情了 我用按钮演示一下

function handleClick(){

        let index=document.getElementsByName('indexType')[0]

        const index1=index.selectedIndex

        console.log(index1)

}

<select bind:value={select} name="indexType" id="selectIndex">

        <option value="dscs">{a}</option>

        <option value="sdhcds">{b}</option>

        <option value={c}>{c}</option>

    </select>

代码案例:

<script>

    let value1=''

    function handle(){

        var select=document.getElementsByName('index')[0]

        var index=select.selectedIndex

        if(index==1){

            alert('失败!')

        }else{

            alert('成功!')

        }

    }

    console.log()

</script>

<main>

    <select bind:value={value1} name="index" id="list">

        <option>{1}</option>

        <option>{2}</option>

        <option>{3}</option>

    </select>

    <button on:click={handle}>处理成功事件!</button>

</main>