表单输入

对于只读表单输入，例如 ，我们需要使用@change来调用更新Vue数据实例的方法:

示例

App.vue:

信息:在上面的例子中，提交的文件名前面有一个文件路径C:\fakepath\。 这是为了防止恶意软件猜测用户的文件结构。

其他表单输入

对于上面提到的表单输入，我们必须为 value 属性提供一个值，但是对于下面的表单输入，用户提供该值:

• </code></li> </ul> <p>因为用户已经为这些类型的表单输入提供了值，所以我们在 Vue 中需要做的就是使用 <code class="w3-codespan">v-model</code> 将输入连接到数据属性。</p> <p>这是在 Vue 中使用 <code class="w3-codespan"><input type="range"></code> 的方法:</p> <h3>示例</h3> <p><code class="w3-codespan">App.vue</code>:</p> <pre class="language-html notranslate w3-white" data-line="3"><code><form @submit.prevent="registerAnswer"> <label>你有多高?<br> <input v-model="heightInp" type="range" min="50" max="235"> {{ heightInp }} cm </label> <button type="submit">Submit</button> </form> </code></pre> <!--运行示例 »--> <p>这就是如何在 Vue 中使用 <code class="w3-codespan"><input type="color"></code>:</p> <h3>示例</h3> <p><code class="w3-codespan">App.vue</code>:</p> <pre class="language-html notranslate w3-white" data-line="3"><code><form @submit.prevent="registerAnswer"> <label>选择颜色: <input v-model="colorInp" type="color"> </label> <button type="submit">Submit</button> </form> </code></pre> <!--运行示例 »--> <p>这就是如何在 Vue 中使用 <code class="w3-codespan"><textarea></code>:</p> <h3>示例</h3> <p><code class="w3-codespan">App.vue</code>:</p> <pre class="language-html notranslate w3-white" data-line="4"><code><form @submit.prevent="registerAnswer"> <label> <p>您觉得我们的产品怎么样?</p> <textarea v-model="txtInp" placeholder="Write something.." rows="4" cols="35"> Submit

  在我们的 HTML 教程中详细了解不同类型的 HTML 表单输入的工作原理。

  ---

  Vue 练习

  通过练习测试自己

  练习题:

  填写缺少的代码，以便输入获得与"inpText"数据属性的双向绑定。

  ---