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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小鱼程序员

你的鼓励将是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值