Vue学习笔记（十一）表单输入绑定

已于 2023-08-17 16:43:03 修改
阅读量53 收藏
点赞数 1
文章标签： vue.js 学习 笔记
于 2023-08-17 16:23:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingxindrst/article/details/132343822
版权

v-model 用于绑定各种不同类型的输入，<textarea>、<select> 元素 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
<body>
    <div id="app">
		<div id="test1">
			<!-- 文本绑定 先定义变量再绑定--> 
			<p>Message is {{message}}</p>
			<input v-model.lazy="message"  placeholder="edit me"/>   <!--.lazy 在发生change时间之后更新，不随input同步更新 .number把输入转换成数字-->
			<br>
			<!-- 多行文本绑定 -->
			<span>Multiline message is:</span>
			<p>{{message2}}</p>
			<textarea v-model.trim ="message2" placeholder="input multiple lines"></textarea>    <!-- textarea不支持插值表达式  <teextarea>{{message}}</textarea>错误！-->
			<!--.trim除去输入内容两端空格 -->
			<!-- 复选框 -->
			<div>Please choose multiple ones:{{checkedNames}}</div>
			<input type="checkbox" id="sandy" value ="sandy" v-model="checkedNames"/>  <!--绑定的是value id用来设置标签等其他属性-->
			<label for="sandy">Sandy</label>
			<input type="checkbox" id="cheeks" value="cheeks" v-model="checkedNames"/>
			<label for="cheeks">Cheeks</label>
			<input type="checkbox" id="jack" value="jack" v-model="checkedNames">
			<label for="jack">Jack</label>
			
			<!-- 复选框 v-bind动态绑定变量值(除字符之外的数值（1/2)） -->
			<div>Checkbox v-bind:{{toggle}}</div>
			<input type="checkbox" v-model="toggle" :true-value="yes" :false-value="no"/> <!--true-value false-value仅支持和 v-model 配套使用-->
			
			<!--单选按钮 -->
			<div>Picked:{{picked}}</div>
			<input type="radio" id="yes" value="yes" v-model="picked"/>
			<label for="yes">Yes</label>
			<input type="radio" id="no" value="no" v-model="picked"/>
			<label for="no">No</label>
			<!-- 单选 v-bind绑定 -->
			<div>Radio v-bind:{{pick}}</div>
			<input type="radio" name="choose" id="first" :value="first" v-model="pick"/>     <!-- 单选框复选问题，如果radio同属于一个name就不会复选 -->
			<input type="radio" name="choose" id="second":value="second" v-model="pick"/>
			<!-- 选择器 -->
			<div>Selected:{{selected}}</div>
			<select v-model="selected" multiple> <!--multiple的意思是把选择的值绑定到一个数组？？？？-->
				<option disabled value="">Please select one</option>
				<option>A</option>
				<option>B</option>
				<option>C</option>
			</select>
			<!--option中使用v-for渲染-->
			<div>Selected_options for array:{{selected_options}}</div>
			<select v-model="selected_options">
				<option v-for="option in options" :value="option.value">
					{{option.text}}
				</option>
			</select>
			<br>
			<!-- 选择器中使用v-bind -->
			<div>Slected v-bind:{{select_number}}</div>
			<select v-model="select_number">
				<option :value="{number:123}">123</option>     <!-- selected 会被设为该对象字面量值 { number: 123 } -->
			</select>
		</div>
	</div>

<script type = "text/javascript">

const vm = new Vue({
	el   : "#app",
	data :{
		message:'',//如果赋初值文本框内就显示初试不显示placeholder内容
		message2:"",  //多行文本绑定变量
		checkedNames:[],   //复选框绑定变量
		yes:1,//复选框v-bind绑定变量
		no:2,
		toggle:1, 
		picked:"",  //单选框绑定变量
		pick:"",  //单选框v-bind绑定变量
		first:1, 
		second:2,
		selected:[],  //选择器绑定变量
		selected_options:'One',
		select_number:"",
		options :([
			{text:'One',value:'One'},
			{text:'Two',value:'Two'},
			{text:'Three',value:'Three'}
		]),
	},

});
vm.$watch('toggle',function(newVal,oldVal){
	console.log(newVal, oldVal);
})

</script>

</body>
</html>

 

xingxindrst
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue学习笔记05表单输入绑定
asdfghjkl_zth的博客
01-16 178
文章目录Vue学习笔记05表单输入绑定基础用法 Vue学习笔记05表单输入绑定 基础用法 可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 注意： v-model 会忽略所有表单元素的 value、checked、selected
Vue学习笔记-表单输入绑定（v-model）
gyypwrs的博客
06-14 224
v-model指令来实现表单元素和数组的绑定 v-model结合input <div id="app"> <input v-model="message" > <h2>{{message}} </h2> </div> <script> var app = new Vue({ el:'#app',
vue学习笔记13-表单输入绑定
nicooooooooooooo的博客
03-02 340
在前端处理表单时，我们常常需要将表单输入框的内容同步给Javascript中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦，百度搜索栏如下，输入什么同步读取，反馈数据。只要用户输入存在的地方基本离不开表单。框中输入什么，下面同步显示什么。单一复选框，绑定布尔类型值。指令帮我们简化了这一步骤。
Vue学习笔记之表单输入绑定
beenle_m的博客
01-20 290
表单输入绑定 v-model 值绑定 1 对于单选按钮，复选框及选择框的选项，v-model绑定的值通常是静态字符串 (对于复选框也可以是布尔值)： <!-- 当选中时，`picked` 为字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` ...
Vue 学习笔记 8 —— 表单输入绑定
我有两颗糖
03-06 162
1. 基础用法 使用 v-model 对表单元素创建双向数据绑定，表单元素包括 input、textarea 和 select。 需要注意的是，v-model 会忽略所有表单元素的初始 attribute 值，因此在 Vue 实例中需要声明初始值。 v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件： text 和 textarea 元素使用 value property 和 input 事件； checkbox 和 radio 使用 checked property
Vue 3.0学习笔记之 表单输入绑定
wm201316的博客
02-04 680
attribute，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(即“yes”或“no”)，请换用单选按钮。幸好，Vue 的组件系统允许你创建具有完全自定义行为且可复用的输入组件。attribute 的初始值而总是将当前活动实例的数据作为数据来源。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。时，HTML 输入元素的值也总会返回字符串。如果你还不熟悉 Vue 的组件，可以暂且跳过这里。
Vue学习笔记9：表单输入绑定
提辖鲁的博客
02-08 240
表单输入绑定 表单输入绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单输入绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body>
Vue.js 3.0 学习笔记（八）表单输入绑定
qq_44648936的博客
03-11 614
一、实现双向数据绑定 双向绑定：就是无论是通过input还是通过Vue对象，都能修改绑定的数据对象的值 Vue通过v-model实现，其本质其实就是语法糖。 v-model会忽略所有表单元素的vlaue、checked、selected特性的初始值，而总是将Vue实例的数据作为数据来源 二、单行文本输入框 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>绑定单行
Vue表单输入绑定
象在舞的技术专栏
08-27 370
本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：《Vue官方文档》。相关学习笔记会记录在我的博客专栏《前端Vue》中，欢迎大家关注~ 一、基础用法 可以使用v-model指令在<input>、<textarea>、<select>元素上创建双向数据绑定。它会根据...
Vue学习笔记之表单输入控件绑定
12-11
本篇笔记将详细讲解Vue中的表单输入控件绑定。 1. **基础用法** - 单行文本输入：`<input v-model="msg" placeholder="edit me">` 这个例子中，`v-model`指令将`msg`变量与输入框的值关联，任何在输入框中的更改...
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
vue2+vue3学习笔记
02-20
Vue2+Vue3 学习笔记 mounted 和 updated 在 Vue 中，`mounted` 和 `updated` 是两个非常重要的生命周期钩子函数。`mounted` 在页面初次加载时调用，而 `updated` 在数据改变并且要在页面重新渲染完成之后调用。...
vue学习笔记1
08-03
这意味着当用户在表单中输入数据时，相应的数据对象会自动更新；反之，当数据对象的值改变时，表单的显示也会同步更新。这种机制简化了数据处理，让开发者无需手动操作DOM来同步数据。 此外，Vue还有`v-once`指令，...
【Vue3】element-plus中el-tree的递归处理赋值回显问题
最新发布
weixin_62980497的博客
08-05 91
回显 -> 递归处理所有层级菜单选中的id。只要勾选一个子节点，回来接收到的父节点数据。整体思路很简单：初始化树 -> 处理。所以涉及到了权限管理和菜单管理。会显示 ，会显示所有子节点数据。由于项目是从0-1开始构建的。
从0开始搭建vue + flask 旅游景点数据分析系统（ 八）：美化前端可视化图形
roccreed的专栏
08-05 135
前端echarts可视化三个图形的美化
如何快速编写一个 Web Components 组件？
梦是太匆
08-05 328
Web Components 是一种用于构建可复用的定制元素的技术，它允许开发者创建自定义的 HTML 标签，提供了一种在不同框架和库中共享组件的方式。
cesium vue2 绘制立体几何区域
qq_42657934的博客
08-05 167
【代码】cesium vue2 绘制立体几何区域。
Vue Flow: 高效构建可视化工作流的利器
专注于全栈开发领域
08-05 616
Vue Flow 是一个用于构建和操作节点连接图（node-based diagrams）的 Vue.js 组件库。它可以用来创建动态的工作流、流程图、组织结构图等。Vue Flow 提供了灵活的 API 和直观的界面，使得开发者能够轻松地定义节点、边和布局，并通过事件和钩子函数进行交互。Vue Flow 允许开发者自定义节点和边的样式和行为。
Vue入门指南：数据绑定与事件处理
总结来说，这篇Vue学习笔记详细讲解了如何在实际项目中引入Vue.js，创建Vue实例，配置数据模型，以及使用基础指令进行视图绑定和事件处理。这些内容对于初学者理解Vue的基础架构和工作方式非常重要，有助于快速上手...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值