vue之v-model表单绑定

1.背景

2.简单使用

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!--<script src="./js/vue.js"></script>-->
</head>
<body>
<div id="app">
  <h3>{{title}}</h3>
  请输入你的姓名:<input v-model="name">
  <br>
  你输入的名称为:{{name}}

</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      title: 'v-model之双向绑定',
      name: 'ldp',
      number: 60
    }
  });
</script>
</body>
</html>
View Code
复制代码

3.双向绑定原理

复制代码
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!--<script src="./js/vue.js"></script>-->
</head>
<body>
<div id="app">
  <h3>{{title}}</h3>
  <pre>
    原理:
    原理很简单,
    第一步:使用v-bind给value元素赋值,
    第二步:使用v-on:input监听input输入的变化
  </pre>
  <h4>v-model实现双向绑定</h4>
  请输入你的姓名:<input v-model="name">
  <br>
  你输入的名称为:{{name}}
  <hr>
  <h4>自己写代码实现双向绑定(v-bind与v-on配合使用就可以了)</h4>
  请输入你的姓名:<input v-bind:value="name2" v-on:input="name2=$event.target.value">
  <br>
  你输入的名称为:{{name2}}

</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      title: 'v-model之原理',
      name: 'ldp',
      name2: 'ldp2',
      number: 60
    }
  });
</script>
</body>
</html>
View Code
复制代码

4.单选框

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!--<script src="./js/vue.js"></script>-->
</head>
<body>
<div id="app">
  <h3>{{title}}</h3>
  请输入你的性别:
  <label for="male">
    <input id="male" type="radio" v-model="gender" value="1"> 男
  </label>

  <label for="female">
    <input id="female" type="radio" v-model="gender" value="2"> 女
  </label>

  <label for="other">
    <input id="other" type="radio" v-model="gender" value="3"> 其他
  </label>

  <br>
  你输入的性别为:{{gender}}

</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      title: 'v-model之radio单选框实现',
      name: 'ldp',
      gender: '',
      number: 60
    }
  });
</script>
</body>
</html>
View Code
复制代码

5.复选框

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!--<script src="./js/vue.js"></script>-->
</head>
<body>
<div id="app">
  <h3>{{title}}</h3>
  请选择你喜欢的开发语言:
  <label for="java">
    <input id="java" type="checkbox" v-model="language" value="1"> java
  </label>

  <label for="c">
    <input id="c" type="checkbox" v-model="language" value="2"> c
  </label>

  <label for="c++">
    <input id="c++" type="checkbox" v-model="language" value="3"> c++
  </label>

  <label for="c#">
    <input id="c#" type="checkbox" v-model="language" value="4"> c#
  </label>
  <br>
  你输入的性别为:{{language}}
  <hr>
  <label for="check">
    <input id="check" type="checkbox" v-model="checked"> 请勾选协议
  </label>
  <br>
  你是否勾选了勒:{{checked}}

</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      title: 'v-model之checkbox复选框实现',
      name: 'ldp',
      language: [],
      checked: false,
      number: 60
    }
  });
</script>
</body>
</html>
View Code
复制代码

6.下拉框

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!--<script src="./js/vue.js"></script>-->
</head>
<body>
<div id="app">
  <h3>{{title}}</h3>
  请选择你出生的月份:
  <select v-model="month">
    <option value="1">1月</option>
    <option value="2">2月</option>
    <option value="3">3月</option>
    <option value="4">4月</option>
    <option value="5">5月</option>
    <option value="6">6月</option>
    <option value="7">7月</option>
    <option value="8">8月</option>
    <option value="9">9月</option>
    <option value="10">10月</option>
    <option value="11">11月</option>
    <option value="12">12月</option>
  </select>
  <br>
  你选择的月份是:{{month}}
  <hr>
  请选择你去过的城市:
  <select v-model="city" multiple>
    <option value="1">成都</option>
    <option value="2">北京</option>
    <option value="3">上海</option>
    <option value="4">广州</option>
  </select>
  <br>
  你选择的月份是:{{city}}


</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      title: 'v-model之select下拉框选择',
      month: '',
      city: [],
      name: 'ldp',
      language: [],
      checked: false,
      number: 60
    }
  });
</script>
</body>
</html>
View Code
复制代码

7.修饰符

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!--<script src="./js/vue.js"></script>-->
</head>
<body>
<div id="app">
  <h3>{{title}}</h3>
  请输入你的名字:
  <input v-model.lazy="name">
  <br>
  v-model.lazy失去焦点后在显示:{{name}}
  <hr>
  请输入你的年龄:
  <input type="number" v-model.number="age">
  <br>
  v-model.number只能输入数字:{{age}}
  <hr>
  请输入你的家庭地址:
  <input v-model.trim="address">
  <br>
  v-model.trim会去掉首尾空格:{{address}}

</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      title: 'v-model之select下拉框选择',
      name: '',
      age: null,
      address: ''
    }
  });
</script>
</body>
</html>
View Code
复制代码

 完美!

posted @   李东平|一线码农  阅读(104)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
点击右上角即可分享
微信分享提示
AI IDE Trae