Vue.js基础-08- 表单双向绑定数据 v-model（input 绑定，extarea绑定，复选框绑定，单选框绑定，下拉菜单绑定）

已于 2022-11-19 00:07:27 修改
阅读量2.6k 收藏 26
点赞数
分类专栏： # vue框架学习 文章标签： vue.js javascript 双向绑定数据 input 表单
于 2022-06-05 22:54:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingzuo_1840/article/details/124851988
版权

文章目录

1. input -双向数据绑定

语法示例

 <input v-model="name" >

完整示例

创建一个input，绑定vue实例中的name
输入框中用户可输入文本
输入框下打印name值，因为绑定，因此会随用户输入变化。

  • 代码

placeholder：占位，下例name为空时输入框中显示该值。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <style>
    .active {
      border-style: dotted;
      padding: 25px;
    }
  </style>
</head>

<body>
  <div id="app" v-bind:class="{ 'active': true }">
    <p>input 元素：</p>
    <input v-model="name" placeholder="请输入您的姓名">
    <p>姓名: {{ name }}</p>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        name: '',
      }
    })
  </script>
</body>

</html>
  • 结果输出

因为name开始为空，因此输入框中显示placeholder的值

在这里插入图片描述

输入后，因为输入框绑定了name ，因此下边会打印出输入的值

在这里插入图片描述

2. extarea - 双向数据绑定

语法示例

  <textarea v-model="message" ></textarea>

message在vue示例中定义。

完整示例

创建一个输入框，绑定vue实例中的message
输入框中用户可输入多行文本
输入框下打印message值，因为绑定，因此会随用户输入变化。

  • 代码

textarea： 元素可多行输入。
placeholder：占位，下例message为空时显示该值。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <style>
    .active {
      border-style: dotted;
      padding: 25px;
    }
  </style>
</head>

<body>
  <div id="app" v-bind:class="{ 'active': true }">
    <p>textarea 元素：</p>
    <textarea v-model="message" placeholder="多行文本输入……"></textarea>
    <p style="white-space: pre">{{ message }}</p>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: '身未升腾思退步\n功成应忆去时言\n只因先主叮咛后\n星落秋风五丈原\n'
      }
    })
  </script>
</body>

</html>
  • 结果显示

在输入框中用户可输入多行数字
在这里插入图片描述

3. 复选框 - 双向数据绑定

语法示例

<input type="checkbox" v-model="checked">

完整示例（单个复选框）

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <p>单个复选框：</p>
    <input type="checkbox" id="myId" v-model="checked">
    <label for="myId">{{ checked }}</label>

  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        checked: false,
      }
    })
  </script>
</body>

</html>
  • 结果显示（未选中）
    在这里插入图片描述
  • 结果显示（选中）
    在这里插入图片描述

完整示例（多个复选框）

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Crow-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">

    <p>多个复选框：</p>
    <input type="checkbox" id="guanYu" value="关羽" v-model="checkedNames">
    <label for="guanYu">关羽出战</label>
    <input type="checkbox" id="zhangFei" value="张飞" v-model="checkedNames">
    <label for="zhangFei">张飞出战</label>
    <input type="checkbox" id="zhaoYun" value="赵云" v-model="checkedNames">
    <label for="zhaoYun">赵云出战</label>
    <br>
    <span>选择的值为: {{ checkedNames }}</span>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        checkedNames: []
      }
    })
  </script>
</body>

</html>

在这里插入图片描述

4. 单选框 -双向数据绑定

语法示例

<input type="radio" value="关羽" v-model="picked">

完整示例

  • 代码
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <input type="radio" id="guanYu" value="关羽" v-model="picked">
    <label for="guanYu">关羽</label>
    <br>
    <input type="radio" id="zhangFei" value="张飞" v-model="picked">
    <label for="zhangFei">张飞</label>
    <br>
    <span>选中值为: {{ picked }}</span>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        picked: '新兵'
      }
    })
  </script>
</body>

</html>
  • 结果显示
    在这里插入图片描述

5. 下拉菜单 -双向数据绑定

语法示例

<select v-model="selected" >

完整示例

给下拉菜单绑定vue实例中的数据，选择下拉菜单选项，vue实例中数据改变。

  • 代码
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <select v-model="selected" >
      <option value="">选择一名武将</option>
      <option value="关羽">关羽</option>
      <option value="张飞">张飞</option>
      <option value="赵云">赵云</option>
    </select>

    <div >
      <br>
      出战武将为: {{selected}}
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        selected: ''
      }
    })
  </script>
</body>

</html>
  • 显示结果

在这里插入图片描述
在这里插入图片描述

玄德公笔记
关注
  • 0
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue双向数据绑定v-model绑定单选框，复选框，下拉框
while(True): print('adorable')
09-20 2909
v-model使用1. 简单的demo2. 三种框的绑定 注意它是自动帮你确认值的！！！无需关心过程，把json数据一丢到data中，自动选中。 1. 简单的demo 实现一边在输入框输入，一边显示输入框的内容 2. 三种框的绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue 数据双向绑定</title> &
vue.js使用v-model指令实现的数据双向绑定功能示例
10-18
双向绑定意味着当你在视图层（例如输入框、选择框或复选框）中修改数据时，这些变化会自动反映到Vue实例的数据模型中；同样，当你在数据模型中更新值时，视图也会相应地更新。这种机制减少了开发者手动操作DOM的需要...
详解vuejs2.0 select 动态绑定下拉框支持多选
10-17
主要介绍了vuejs2.0 select动态绑定下拉框 ，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue开发学习笔记:使用vuex实现动态绑定下拉数据(数据库获取)
JustWantToFly的博客
10-11 4501
使用vuex实现同一个el-table中的不同字段绑定各自对应的下拉数据
Vue3/Vite下拉框数据动态绑定从数据库中（接口中）传出的数据
最新发布
m0_54404556的博客
05-28 628
为什么接收的是data.data，是因为我接口传出的参数是下面的这个形式。替换为你实际的接口地址，并根据实际情况调整代码。
vue组件动态绑定属性值
JCAL123的博客
07-06 1939
vue组件动态绑定属性值。
el-Dropdown 两个下拉框之间的动态绑定 实现默认选中值
一起加油吧~
12-24 4801
有时候我们在项目中可能多个下拉框之间的数据具有一个级联绑定关系，通过切换某个下拉框的选项值之后，另一个下拉框的中的选项也随之改变。 这个在项目中是经常使用到的一种场景，今天我来分享分享我们具体的实现和需要注意的一些点
Vue (下拉列表)实现数据的双向绑定
weixin_46087919的博客
10-12 2934
Vue 实现数据的双向绑定 select 功能
Vue.js 中的 v-model 指令及绑定表单元素的方法
10-17
`v-model` 指令在 Vue 中用于实现视图和模型之间的双向数据绑定，它使得表单元素的值能够实时反映到 Vue 实例的数据对象中，反之亦然。在本文中，我们将深入探讨 `v-model` 的基础用法和在不同表单元素上的应用。 1...
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
10-17
在表单控件如输入框、文本域、单选按钮、复选框等元素上使用`v-model`，可以实现实时更新数据，极大地简化了前端开发的工作流程。 6.1 基本用法 对于最常见的输入框`<input type="text">`，`v-model`的使用方式...
Vue表单demo v-model双向绑定问题
08-27
在Vue.js中，`v-model`是一个非常关键的指令，用于实现数据的双向绑定，它使得视图（View）和模型（Model）之间的数据能够实时同步。在本篇示例中，我们通过一个简单的Vue表单组件来深入理解`v-model`的工作原理以及...
学习vue.js表单控件绑定操作
10-20
本篇文章将深入讲解如何在Vue.js中进行表单控件绑定，包括文本输入框、复选框、单选框、下拉列表等常见控件。 首先，`v-model`指令是实现双向数据绑定的关键。在HTML的表单控件中，`v-model`用于将控件的值与Vue...
【vue下拉框动态绑定数据默认选中第一条】
sdaawafg的博客
07-20 7169
vue下拉框动态绑定数据默认选中第一条
el-select 下拉列表选项动态绑定接口传过来的值
qq_51710516的博客
07-12 2993
一般来讲，下拉列表的值都为常量，直接写死，遇到需求，需要绑定接口穿过来的值这是接口穿过来的值这为下拉列表空数组，要将接口获得的数据填充进去 在js里写个方法，循环绑定接口中获得的数据 html页面代码 至此数据绑定成功...
【Vue3】Vue3中实现下拉框中的动态绑定示例
【敦厚的曹操】的专栏
05-07 1701
【代码】【Vue3】Vue3中实现下拉框中的动态绑定示例。
vue 动态追加输入框 下拉框 动态v-model绑定
greed
03-27 8814
效果如下 父文件 <template> <div class="parent-selete_header-color"> <selete></selete> </div> </template> <script> import selete from '@/pages/demo/selete.vue'; export default { components: { selete } }; </s
elementUI下拉选择框动态绑定数据
abc234ABC的博客
03-07 8890
html部分： <el-form-item label="板块"> <el-select v-model="form.plate" placeholder="选择发布板块"> <el-option v-for="plate in plates" :value="plate.plateId" :key="plate.plateId" :label="plate.plateName"></el
小程序input实现双向绑定
weixin_69370222的博客
04-16 1619
小程序如何实现input框双向绑定
vue下拉框动态绑定数据
06-07
Vue 下拉框的动态绑定数据可以通过 `v-for` 指令和 `v-bind` 指令来实现。你可以在 Vue 实例中定义一个数组，然后使用 `v-for` 指令将数组中的数据渲染到下拉框中，并使用 `v-bind` 指令将选中的值绑定到 Vue 实例中的数据属性。 以下是一个简单的示例代码： ```html <template> <div> <select v-model="selectedValue"> <option v-for="item in options" :value="item.value">{{ item.label }}</option> </select> </div> </template> <script> export default { data() { return { options: [ { label: '选项一', value: '1' }, { label: '选项二', value: '2' }, { label: '选项三', value: '3' } ], selectedValue: '' } } } </script> ``` 在上面的代码中，`options` 数组包含了下拉框中的选项，每个选项都有一个 `label` 和一个 `value` 属性。`selectedValue` 是一个数据属性，用来存储下拉框中选中的值。`v-for` 指令循环渲染每个选项，`:value` 属性将选项的值绑定到 `item.value`，`{{ item.label }}` 显示选项的标签。`v-model` 指令将选中的值绑定到 `selectedValue` 属性上。 你可以根据自己的需求修改上面的代码，来实现动态绑定数据到下拉框中。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玄德公笔记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值