正文 

当前位置： 首页 > 源码 >

Svelte：如何将格式化的输入字段绑定到属性

     2023-04-13     13

关键词：

【中文标题】Svelte：如何将格式化的输入字段绑定到属性【英文标题】：Svelte: How to bind a formatted input field to a property 【发布时间】：2020-01-30 08:29:15 【问题描述】：

首先：Svelte 对我来说还是个新手。我希望这个问题不是太琐碎。

在一个简单的组件中，我想使用格式化输入字段的内容进行计算。 例如： 在输入字段中，欧元金额应以格式 (1.000) 显示。 旁边应显示带有金额加增值税的文本 (1.190)。

我如何做到这一点没有格式化对我来说很清楚。示例如下所示：

    export let net;
    export let vat;

    $: gross = net + (net * vat / 100);
    $: grossPretty = gross.toLocaleString('de-DE', minimumFractionDigits: 0, maximumFractionDigits: 0 );

使用这样的简单标记：

    <form>
      <label>Net amount</label>
      <input type="text" step="any" bind:value=net placeholder="Net amount">
    </form>
    <div>
        Gros = grossPretty €
    </div>

在 vue 中，我使用了计算属性。它的 getter 传递格式化的字符串，它的 setter 获取格式化的字符串并保存原始值。 （在 data() 中我定义 net，在计算属性中我定义 netInput。输入字段使用 netInput 作为 v-model）。 它看起来像这样：

netInput: 
   get()
      return this.net.toLocaleString('de-DE', minimumFractionDigits: 0, maximumFractionDigits: 0 );
   ,
   set(s)
      s = s.replace(/[\D\s._-]+/g, "");
      this.net = Number(s);

我如何在 svelte 中处理它？

【问题讨论】：

【参考方案1】：

你可以做一些类似的事情，你创建另一个计算变量来存储来自输入字段的变形字符串并用于计算而不是直接输入

  export let net;
  export let vat;
  $: net_plain = Number(net.replace(/[\D\s._-]+/g, ""));
  $: gross = net_plain + (net_plain * vat / 100);
  $: grossPretty = gross.toLocaleString('de-DE', minimumFractionDigits: 0, maximumFractionDigits: 0 );

但也许可以为变量找到一个更好的名称:)

【讨论】：

【参考方案2】：

感谢 Stephane Vanraes，我找到了解决方案。

它没有vue方法的魅力，但没关系。首先我插入了“net_plain”。为了在输入过程中格式化输入字段，我为 keyup 事件添加了一个事件监听器。

<input type="text" step="any" bind:value=net on:keyup=handleKeyUp placeholder="Net amount">

事件由函数handleKeyUp处理如下：

function handleKeyUp(event)
        if ( window.getSelection().toString() !== '' ) 
            return;
        
        // ignore arrow keys
        let arrows = [38,40,37,39];
        if ( arrows.includes( event.keyCode)) 
            return;
        
        let input = event.target.value.replace(/[\D\s._-]+/g, "");
        input = input ? parseInt( input, 10 ) : 0;
        event.target.value = ( input === 0 ) ? "" : input.toLocaleString( "de-DE" );

但是：如果有人有使用 getter 和 setter 的解决方案，我将不胜感激！

【讨论】：

这是一个使用可能有用的操作的示例：svelte.dev/repl/5c1abf5d24c94960a267124662e11a8d?version=3.44.2

如何将文本字段绑定到包含一行的一个核心数据实体的属性？

】如何将文本字段绑定到包含一行的一个核心数据实体的属性？【英文标题】：Howtobindtextfieldstoattributesofonecoredataentitycontainingonerow?【发布时间】：2011-09-0602:56:20【问题描述】：我有一个视图想要显示我的应用的汇总使用数据。... 查看详情

Jquery：如何根据属性值将按键事件绑定到输入类型“数字”[重复]

】Jquery：如何根据属性值将按键事件绑定到输入类型“数字”[重复]【英文标题】：Jquery:Howtobindkeypresseventtoaninputtype\'number\'basedonattributevalue[duplicate]【发布时间】：2017-01-2807:20:45【问题描述】：我只想在输入字段为number类型且对... 查看详情

如何将复选框绑定到可为空的字节字段？

】如何将复选框绑定到可为空的字节字段？【英文标题】：Howtobindcheckboxestonullablebytefields?【发布时间】：2020-02-2800:20:06【问题描述】：输入标签助手需要将复选框绑定到不可为空的布尔字段，但我的旧sql表包含可空的tinyint字段... 查看详情

如何将 SwiftUI 视图绑定到数组中元素的属性

】如何将SwiftUI视图绑定到数组中元素的属性【英文标题】：HowtobindaSwiftUIviewtopropertiesofanelementinanarray【发布时间】：2020-12-1317:17:27【问题描述】：我在SwiftUI中使用MVVM架构。我正在尝试重构我的代码以在我的视图中使用ForEach()来... 查看详情

如何在 Svelte 3 中进行条件自动对焦

】如何在Svelte3中进行条件自动对焦【英文标题】：HowtohaveconditionalautofocusinSvelte3【发布时间】：2022-01-2217:38:26【问题描述】：我想将焦点转移到我的页面上以响应键盘输入。对于Svelte，似乎最简单的方法是使用autofocus属性。但是... 查看详情

将 HTML 滑块“最大”范围绑定到输入字段的值

...utfield\'svalue【发布时间】：2016-05-0600:54:40【问题描述】：如何将jQueryuiSlider的“最大”范围值设置为用户可编辑输入字段的值？这是我的example<divdata-role="page"id="page1"><divdata-role="h 查看详情

如何将值绑定到类属性？

】如何将值绑定到类属性？【英文标题】：Howtobindavaluetoaclassproperty?【发布时间】：2022-01-0117:25:24【问题描述】：我是Web开发新手，也是C#/Blazor新手。因此，我正在从事我的一个宠物项目。在这个项目中，我有一个页面，我希望... 查看详情

Svelte 每个工作两次/每个绑定错误（无法设置未定义的属性）

】Svelte每个工作两次/每个绑定错误（无法设置未定义的属性）【英文标题】：Svelteeachworkedtwice/eachbindingerror(Cannotsetpropertiesofundefined)【发布时间】：2021-12-1905:07:37【问题描述】：我正在尝试绑定#each块中的元素并通过单击将它们... 查看详情

如何将 jquery datepicker 调用/绑定到标签或 div 而不是输入字段

】如何将jquerydatepicker调用/绑定到标签或div而不是输入字段【英文标题】：Howtocall/bindajquerydatepickertoalabelordivinsteadofaninputfield【发布时间】：2010-11-1817:26:24【问题描述】：我正在此页面上使用jqueryui日期选择器-http://jqueryui.com/demos/... 查看详情

如何将集合属性绑定到 Spring MVC 中的表单

】如何将集合属性绑定到SpringMVC中的表单【英文标题】：HowdoIbindcollectionattributestoaforminSpringMVC【发布时间】：2010-09-2200:18:05【问题描述】：我正在尝试使用Spring-MVC将我的模型对象之一绑定到表单的字段。一切正常，除了模型对... 查看详情

如何将输入绑定到 vue.js 模型

】如何将输入绑定到vue.js模型【英文标题】：Howtobindinputtovue.jsmodel【发布时间】：2017-03-2110:35:48【问题描述】：有人可以帮我将输入数据绑定到vue.js模型吗？我有一个fruit对象数组，其中price的值为空。我想将每个fruit对象映射到... 查看详情

将输入文本值传递给 bean 方法，而不将输入值绑定到 bean 属性

】将输入文本值传递给bean方法，而不将输入值绑定到bean属性【英文标题】：Passinputtextvaluetobeanmethodwithoutbindinginputvaluetobeanproperty【发布时间】：2012-08-1003:11:57【问题描述】：我可以将输入文本字段值传递给bean方法而不将值绑定... 查看详情

角度绑定到文件输入字段的选择？

...的值，但由于某种原因，它总是显示一些虚拟文件路径。如何改进绑定以使其不具有此行为（仅文件名，如selec 查看详情

角度绑定错误 - 无法绑定到“ngModel”，因为它不是“输入”的已知属性，即使该属性存在

】角度绑定错误-无法绑定到“ngModel”，因为它不是“输入”的已知属性，即使该属性存在【英文标题】：AngularBindingerrror-Can\'tbindto\'ngModel\'sinceitisn\'taknownpropertyof\'input\'eventhoughthepropertyexists【发布时间】：2020-11-2816:50:25【问题描... 查看详情

Svelte：双向绑定触发反应性两次

】Svelte：双向绑定触发反应性两次【英文标题】：Svelte:twowaybindingtriggersreactivitytwice【发布时间】：2021-05-2413:09:13【问题描述】：有人知道为什么如果我将一个属性绑定到一个组件会触发两次响应吗？我创建了一个REPL来重现问题... 查看详情

如何使用 Jquery Ajax 将表单输入字段发送到 JSON 格式

】如何使用JqueryAjax将表单输入字段发送到JSON格式【英文标题】：HowtosendFormInputfieldintoJSONFormatusingJqueryAjax【发布时间】：2020-02-0821:59:18【问题描述】：我想将控制器上的数据发送为JSON格式。但进入一个字符串。那我可以这样做... 查看详情

Angular2中的属性更改时数据绑定不更新

...ar2【发布时间】：2016-09-2303:56:11【问题描述】：我不知道如何将字段绑定到组件，以便在我更改OnDataUpdate()中的属性时更新字段。“OtherValue”字段与输入字段有两种有效的绑定方式，“Name”字段在显示组件时显示“test”。但是... 查看详情

在用户将数据输入字段之前如何防止验证？

】在用户将数据输入字段之前如何防止验证？【英文标题】：Howtopreventvalidationuntiltheuserentersdataintoafield?【发布时间】：2014-05-0912:05:55【问题描述】：我有带有常规控件的WPF表单：组合框、TextEdit等。我正在使用标准WPF验证：ViewMo... 查看详情