时间戳

首页 > 解决方案 > Svelte - 使用复选框在两个输入值之间切换

input - Svelte - 使用复选框在两个输入值之间切换

问题描述

我是 svelte 的新手，我试图弄清楚如何在选中复选框时更改输入的默认值，并在计算中使用这个更改的值。

我的代码有效：

 <label> {#if yes}
SI Units to US Units
{:else}
    US Units to SI units
{/if}
<input type=checkbox bind:checked={yes}>
</label>


{#if yes}
<input bind:value={siValue}>        
{:else}
<input bind:value={usValue}>        
{/if}

{#if yes}
<span>{((siValue / factor)).toFixed(2)}</span>
{:else}
<span>{((usValue * factor)).toFixed(2)}</span>
{/if}

我想做的是只使用一个输入并更改默认值，但也能够手动更改输入值，但我无法让它工作。值会发生变化，但是当我尝试手动更改数值时，计算不起作用。

这是该代码：

 <input value={yes ? siValue : usValue} on:input="{e => setUnitVal(e.target.value)}">


<script>
let yes = false;
let siValue = '';
let usValue = '';

function setUnitVal(value) {
    siValue = +value;
    usValue = +value;
}   

</script>

标签： inputsvelte

解决方案

这是另一种方法。您可以使用 JS 标签语法$:来设置usValue和的值siValue。我们不会$:直接放在usValue并且siValue因为它会创建一个循环依赖，因为usValue依赖，siValue反之亦然。相反，我们将把它放在yes变量上并有条件地分配usValueand siValue。

然后在模板中，我们需要做的就是绑定输入value和span它们各自的变量，而 JS 标签语法为我们处理计算。

<script>
    let yes = false;
    let factor = 1.2;
    let siValue = '';
    let usValue = '';
    $: yes ? usValue = (siValue / factor).toFixed(2) : siValue = (usValue * factor).toFixed(2);
</script>

<label>
    {#if yes}
        SI Units to US Units
    {:else}
        US Units to SI units
    {/if}
    <input type=checkbox bind:checked={yes}>
</label>

{#if yes}
    <input bind:value={siValue}>
    <span>{usValue}</span>
{:else}
    <input bind:value={usValue}>
    <span>{siValue}</span>
{/if}

这是 Svelte REPL上的一个示例。

推荐阅读