📌  相关文章
📜  input.value 绑定 (1)

📅  最后修改于: 2023-12-03 15:01:24.718000             🧑  作者: Mango

以 input.value 绑定

简介

input.value 属性用于获取或设置一个输入元素的值。当绑定 input 元素的 value 属性时，可以使用该元素的 .value 属性进行双向数据绑定。

如何使用

在 html 文件中添加一个 input 元素：

<input type="text" id="example-input">

在 JavaScript 中获取 input 元素：

const inputElement = document.querySelector('#example-input');

将 .value 属性绑定到另一个变量：

let inputValue = inputElement.value;

此时，inputValue 就会随着输入框的值的变化而改变。

如果要将 inputValue 的值绑定给 input 元素，可以将其赋值给 .value 属性：

inputElement.value = inputValue;
示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Input Binding Example</title>
  </head>
  <body>
    <input type="text" id="example-input">
    <p>Input Value: <span id="input-value"></span></p>
    <script>
      const inputElement = document.querySelector('#example-input');
      const inputValueElement = document.querySelector('#input-value');

      let inputValue = inputElement.value;
      inputValueElement.innerText = inputValue;

      inputElement.addEventListener('input', event => {
        inputValue = event.target.value;
        inputValueElement.innerText = inputValue;
      });
    </script>
  </body>
</html>

此示例将 input 元素的值绑定到 inputValue 变量，并在页面上显示。每当输入框的值发生变化，inputValue 和页面上的显示都会更新。