vue-表单输入绑定

最新推荐文章于 2022-12-22 16:33:43 发布

玲玲酱

最新推荐文章于 2022-12-22 16:33:43 发布

阅读量148

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_45758587/article/details/109754768

版权

本文详细介绍了Vue.js中的双向数据绑定原理，包括在不同表单元素中的应用，如单行文本框、多行文本框、复选按钮、单选按钮和下拉菜单。同时，还探讨了v-model的修饰符，如lazy用于在change事件后同步，number用于将输入值转换为数值类型，以及trim用于去除用户输入的首尾空白字符。

摘要由CSDN通过智能技术生成

双向数据绑定

用v-model指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
   <style>
       table{
           border-collapse: collapse;
       }
       td{
           width: 100px;
           height: 30px;
           border: 1px solid red;
           text-align: center;
       }
   </style>
</head>
<body>
    <div id="app">
        <!-- trim 自动过滤用户输入的首尾空白字符 -->
        |&