Vue基础使用之V-Model绑定表单输入

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 400+累计阅读 424平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄7年

关注

原创 2024-04-16 20:39:24 424 阅读 AI 写同款· GEO 优化 ›

Vue3中的模板指令——表单输入绑定指令v-model（:value和@input） v-model指令实现表单输入值与父组件中的属性变量保持同步阅读详情

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>

    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>

    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            checkedNames:["Jack","John"],//初始化时多选框选中的数据
        },
    })
</script>
</body>
</html>

收录于

当前文章被以下社区和专栏收录：

标签

#vue.js #前端 #javascript

Vue3中v-model指令实现父子组件中表单输入双向数据绑定 Vue3中，使用defineModel()函数实现父子组件表单数据的双向绑定阅读详情

相关推荐

配电网可靠性评估（一）—最小路法和非序贯蒙特卡洛模拟法的matlab实现

电力系统的可靠性研究是相关领域的热点问题。根据研究对象的不同，又可分为发电系统的可靠性，输电系统的可靠性和配电系统的可靠性。配电网在电力系统中处于最末端的位置，直接和用户相连，一旦出现故障情况，就会在用户侧表现为停电事故。因此对配电网的可靠性评估有着重大意义。......

配电网和matlab的博客 1万+

Vue表单输入绑定v-model

在前端处理表单时，我们常常需要将表单输入框的内容同步给Javascript中相应的变量。手动连接绑定和更改事件监听器可能会很麻，默认情况下，v-model 会在每次input事件后更新数据。可以添加lazy修饰符来改为在每次change事件后更新数据。v-model 也提供了修饰符：.lazy ,.number , .trim。单一的复选框，绑定布尔类型值。指令帮我们简化了这一步骤。

qq_51856496的博客 382

保姆级教程：在瑞芯微RV1126B上部署轻量化YOLOv8，实现端侧实时目标检测

本文详细介绍了在瑞芯微RV1126B芯片上部署轻量化YOLOv8模型的完整流程，包括开发环境搭建、模型训练优化、量化转换及嵌入式部署。通过利用RV1126B的3TOPS NPU算力和AI-ISP特性，实现端侧实时目标检测，提升边缘AI应用的性能和效率。

weixin_30329623的博客 271

Vue3:v-model的使用场景-表单输入绑定

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。另外，v-model还可以用于各种不同类型的输入，<textarea><select>元素。<input><textarea>valueinputcheckedchange<select>valuechange注意v-model会忽略任何表单元素上初始的valuechecked或selectedattribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。

weixin_73060959的博客 1787

从零开始：在Windows WSL中搭建Openfoam7+blastfoam2.0.0开发环境（避坑大全）

本文详细指导在Windows WSL中搭建OpenFOAM 7与BlastFOAM 2.0.0开发环境，重点解析了安装过程中的常见“坑点”，如编译模式不匹配导致的符号错误，并提供了从系统准备、软件部署到环境验证的完整解决方案，帮助开发者高效构建CFD与爆炸模拟开发平台。

stem5的博客 527

【FLINK+Kerberos+kafka】在华为云上 bootstrap.server使用IP的GSS initiate failed 问题处理

目前互联网上所有的资料显示都是说没有正确设置KDC之类的,但本博主实际通过java代码低版本如使用kafka-client 0.11.0 ,2.4.0等版本手动创建kafkaconfig 或者使用华为云的LoginUtils类都能够正常链接，所以应该是高版本添加了相关配置，或者flink在subtask 创建kafkaAdminClient时丢弃或使用了默认的一些配置行为，导致了客户端和kdc验证之间出现了principal 不一致导致验证失败。client.dns.lookup配置项作用。

honghanyue1791的博客 576

Vue.js的v-model：表单输入的双向绑定魔法

🤍 前端开发工程师、技术日更博主、已过CET6🍨、23年度博客之星前端领域TOP1🕠高级专题作者、打造专栏🍚签约作者、上架课程。

你若盛开，清风自来 836

疾病负担研究（GBD）——如何使用joinpoint软件计算AAPC

weixin_44240228的博客 1万+

vue 表单输入与绑定 v-model

　　vue使用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。下面我们通过示例先了解下基本用法： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

weixin_30411997的博客 228

深信服技术认证“SCCA-C”划重点：信服云托管云

该认证包括云数据中心基础、云计算基础、云计算关键技术、云计算交付和运维体系、云计算技术商业应用、信服云托管云、深信服超融合HCI、深信服桌面云aDesk、深信服分布式存储EDS、深信服应用交付AD。学习并获得SCCA-C认证后，可以具备深信服产品功能原理与实践，能够根据业务需求，协助完成云产品方案落地与实施；能够根据业务需求，完成深信服云产品的部署和管理的基本工作。为帮助大家更加系统化地学习云计算知识，高效通过云计算工程师认证，深信服特推出“SCCA-C认证备考秘笈”，共十期内容。

sangfor_edu的博客 615

ICC2：postmask ECO参考脚本

更多学习内容请关注「拾陆楼」知识星球。

m0_61544122的博客 886

探究Vue表单输入绑定v-model

探究Vue 表单输入绑定 v-model 细节细节还是细节

pymxb1991的专栏 760

RK3568平台开发系列讲解（中断及异常篇）中断下半部：中断线程化

以前用 work 来线程化地处理中断，一个 worker 线程只能由一个 CPU 执行，多个中断的 work 都由同一个 worker 线程来处理，在单 CPU 系统中也只能忍着了。少数中断不能线程化，典型的例子是时钟中断，有些流氓进程不主动让出处理器，内核只能依靠周期性的时钟中断夺回处理器的控制权，时钟中断是调度器的脉搏。中断处理线程是优先级为50、调度策略是SCHED_FIFO的实时内核线程，名称是“irq/”后面跟着Linux中断号，线程处理函数是。，说明是线程化的中断，那么唤醒中断处理线程。

内核笔记 436

【Vue.js基础教程】第9章：v-model 表单输入绑定详解：从文本框到自定义组件

你有没有碰到过这样的场景：用户在页面上填写表单，结果你要写一大堆代码来同步这些输入值？别急，Vue 的v-model可以帮你解决这个问题！v-model是 Vue 提供的一个指令，用来实现双向绑定数据和表单输入的简单语法糖。无论是文本框、复选框，还是选择框，v-model都能轻松搞定！本质是什么？v-model的本质是：监听用户输入事件并动态更新数据。同时，它也能处理一些极端场景，比如中文输入法的组合文字。v-model。

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。 747

WINCC7.3破解文件

WINCC7.3硬件够破解文件，有需要的下载！WINCC7.3硬件够破解文件，有需要的下载！

假人有限元模型

假人模型，车辆碰撞假人有限元模型，适合做乘员安全的研究者利用

Vue 表单输入绑定（v-model 双向数据绑定）——Vue 学习笔记（八）

v-model 我们可以使用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。 v-model 本质上只是语法糖。它负责监听用户的输入事件以及更新数据，并对一些极端场景进行一些特殊处理。 v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源：不使用 v.

ySFRaabbcc的博客 636

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

Vue表单输入绑定 v-model

<input>、<textarea> 及 <select> 元素上创建双向数据绑定使用v-model，它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue实例的数据作为数据来源。这句话的意思就是说，你的表单...

__盛某人的博客 284

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。，新界面，新视觉，

Vue（10）表单输入绑定v-model

v-model v-model指定可以实现表单值与属性的双向绑定。即表单元素中更改了值会自动的更新属性中的值，属性中的值更新了会自动更新表单中的值绑定的属性和事件 v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件： 1.text和textarea元素使用value属性和input事件。 2.checkbox和radio使用checked属性和change事件。 3.selec...

weixin_43880991的博客 430

vue表单绑定一个输入信息,v-model

monicateacat的博客 815

vue-表单输入 v-model双向数据绑定的语法糖

⚠️ 可以用 v-model 指令在表单元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元 v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v-model 在内部为不同的输入元素使用不同的 propert

weixin_44895142的博客 620

Vue笔记七——v-model表单输入绑定详细介绍

v-model的使用你可以用 v-model 指令在表单、及 `` 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v-model的基本使用表单控件在实际开发中时非常常见的。特别是对于用户信息的提交，需要大量的表单。 Vue中使用v-model指令来实现表单元素和数据的双向绑定。案例解析：当我们在输入框输入内容时因为input中的

weixin_46351593的博客 2687

Vue_v-model表单输入绑定

v-model:实现数据的双向绑定，一般在表单中使用。v-model在表单中，type为text和textarea元素使用value属性和input事件，checkbox使用checked属性，radio使用change事件，select将value作为prop并将change作为事件。 v-model.lazy:本质上是失去焦点时触发 v-model.number:转换为数字 v-model.trim:去掉首尾空格示例： <script src="http://cdn.jsdelivr.net/n

qq_44604924的博客 214

【Vue全解8】Vue表单输入绑定v-model

目录基本用法修饰符 v-model Vue表单和v-model官方文档一、基本用法你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 1、 input代码示例(textarea也是一样的，只是标签不同而已) <

qq_44906900的博客 479

vue之v-model表单输入双向绑定

vue的核心：声明式的指令和数据的双向绑定。那么声明式的指令，已经给大家介绍完了。接下来我们来研究一下什么是数据的双向绑定? 另外，大家一定要知道vue的设计模式：MVVM M是Model的简写，V是View的简写，VM就是ViewModel。单向绑定和双向绑定的区别: 单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自...

weixin_30845171的博客 135

vue学习九(表单输入绑定v-model)

文章目录v-model 表单基础用法文本多行文本复选框多个复选框单选按钮选择框多选择框v-for 渲染的动态选项lazynumbertrim v-model 表单基础用法你可以用 v-model 指令在表单、及元素上创建双向数据绑定，v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。文本 <div id="div1"&gt...