Vue-表单输入绑定

最新推荐文章于 2022-12-08 10:36:12 发布
最新推荐文章于 2022-12-08 10:36:12 发布
阅读量305 收藏
点赞数
分类专栏： 前端知识

转载自：https://www.cnblogs.com/koala0521/p/7744211.html

自我理解：v-model  实际就是一个表单值。

<!DOCTYPE html>
<html>
	<head>
		<title></title>
	    <meta charset="utf-8">
	    <meta content="IE=dege,chrom=1" http-equiv="X-UA-Compatible">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
	    <title>Cart</title>
	    <script src="js/lib/vue.min.js"></script>
	    <script src="js/lib/vue-resource.js"></script>
	    <script src="js/address.js"></script>
	    <script src="js/lianxi.js"></script>
	    <style>
	    </style>
	</head>
	<body>
	    <div id="app">
	    	<!--输入框绑定-->
	    	<input v-model="massage" placeholder="输入信息" />
	    	<p>massage is: {{ massage }}</p>
	    	</hr>
	    	<!--单个选框绑定，返回值为布尔值:-->
	    	<p>单个选框绑定，返回值为布尔值:</p>
	    	<input v-model="radioStatus" type="checkbox" name="isAgree"/>
	    	<br />
	    	<label>数据:{{ radioStatus }}</label>
	    	</hr>
	    	<!-- 多个选框绑定到同一个数据 -->
	    	<div>
	    		<p> 多个选框绑定同一个数据: </p>
	            <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>
	            <!-- checkedNames 为一个数组 [] -->
	            <span>数据: {{ checkedNames }}</span>     
	    	</div>
	    	</hr>
	    	<div>
	    		<p>单选按钮数据：</p>
	    		<input type="radio" id="one" value="1"   v-model="sex"/>
	    		<label for="one">{{ stantic.garder[1] }}</label>
	    		<input type="radio" id="two" value="2" v-model="sex" />
	    		<label for="two">{{ stantic.garder[2] }}</label>
	    		<input type="radio" id="three" value="3" v-model="sex" />
	    		<label >{{ stantic.garder[3] }}</label>
	    		<br />
	    		<!-- sex === 选中的input的value -->
	    		<span>性别代码： {{ sex }}:性别：{{ stantic.garder[sex] }}</span>
	    	</div>
	    	<div>
	    		<p>选择列表：</p>
	    		<select v-model="selected">
	    			<option disabled value="">请选择</option>
	    			<option value="001">北京</option>
	    			<option value="002">天津</option>
	    			<option value="008">上海</option>
	    		</select>
	    		<span>Selected:{{ selected }}</span>
	    	</div>
	    	</hr>
	    	<div>
	    		<h3>值绑定：</h3>
            	<p>
             		  对于单选按钮，勾选框及选择列表选项，v-model 绑定的 value 通常是静态字符串 (对于勾选框是逻辑值)： 
                	<br>
               		但是有时我们想绑定 value 到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。
            	</p>
	            <!-- vm.toggle 和 vm.stantic.isOrNot 绑定 -->
	            <label>是否毕业：</label>
	            <input type="checkbox" name="" v-model='toggle' v-bind:true-value=stantic.isOrNot[1]  v-bind:false-value=stantic.isOrNot[0] >
	            <!-- 选中时 vm.toggle === stantic.isOrNot[1] 未选中时 vm.toggle === stantic.isOrNot[0] -->
	            <p>您选择了：{{toggle}}</p>
	            <h4>请选择列表的值绑定字面量对象：</h4>
	            <select v-model="selected2">
	                <!-- 内联对象字面量 -->
	                <option v-bind:value="123">123</option>
	                <option v-bind:value="456">456</option>
	                <option v-bind:value="789">789</option>
            	</select>
            	<span>vm.selected={{selected2}}</span>
	    	</div>
	    	</hr>
	    	<div>
	            <h3>修饰符</h3>
	            <h4>.lazy</h4>
	            <p>在默认情况下，v-model 在 <mark>input</mark> 事件中同步输入框的值与数据 (除了 上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 <mark>change</mark> 事件中同步：</p>
	            <input v-model.lazy='massage'  >
	            <p>输入完成，信息改变：{{massage}}</p>
	            
	            <h4>.number</h4>
	            <p>如果想自动将用户的输入值转为 Number 类型 (如果原值的转换结果为 NaN 则返回原值)，可以添加一个修饰符 number 给 v-model 来处理输入值：</p>
	            <!-- vm.age的值类型是Number -->
	            <input type="number" v-model.number='age' >
	            <span>类型为：{{ typeof age }}</span>
	
	            <h4>.trim</h4>
	            <p>如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：</p>
	            <input v-model.trim='massage' > 
        	</div>
	    </div>
	    <script>
	    	let vm = new Vue({
		        el:'#app',
		        data:{
		        	massage:'',
		        	radioStatus:false,
		        	checkedNames:[],
		        	sex:'',
		        	selected:'',
		        	selected2:'',
		        	toggle:'',
		        	age:'',
		        	stantic:{
		        		garder:{
		        			1:'男',
		        			2:'女',
		        			3:'不确定'
		        		},
		        		isOrNot:{
		        			0:'否',
		        			1:'是'
		        		}
		        		
		        	}
		        }
			});
	    </script>
	</body>
</html>
码世界
关注
专栏目录
vue表单输入绑定
m0_51281306的博客
04-12 1359
v-model 指令 • 用于给 <input> 、<textarea> 及 <select> 元素设置双向数据 绑定。 • 首先我们来体验一下双向数据绑定的效果。 输入框绑定 表单数据绑定 输入框绑定 • 输入框分为单行输入框 input 与多行输入框 textarea。 单选按钮绑定 表单数据绑定单选按钮绑定 • 单选按钮的双向数据绑定方式如下 复选框绑定 表单数据绑定复选框绑定 • 复选框...
VUE表单数据绑定
qq_34400242的博客
05-03 2245
可以用 v-model 指令在表单input、textarea及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 tips:v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而...
Vue表单输入绑定
weixin_33966095的博客
11-01 124
基础用法 你可以用v-model指令在表单input，textarea以及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但是v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据。 v-model会忽略所有表单元素的value, checked, selected特性的初始...
【VueJS】VueJs---表单输入绑定
DreamSeeker_1314的博客
08-14 425
基础用法 你可以用 v-model 指令在表单 &lt;input&gt;、&lt;textarea&gt; 及 &lt;select&gt; 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v-model 会忽略所有表单元素的 value、chec...
vue中的表单输入绑定
最新发布
TeFuir__Lv的博客
12-08 153
vue中的表单输入绑定
vue-numeric-输入字段组件，用于显示基于Vue的货币值。-Vue.js开发
05-27
vue-numeric 输入字段组件是Vue生态中的一个实用工具，它的主要功能是为用户提供一个可以输入和展示格式化货币值的表单元素。这在处理金融数据或者电子商务应用时非常有用，因为它能够确保用户输入的数据格式正确且...
vue-sku-form:基于 Vue & ElementUI 的电商 SKU 表单配置组件
05-29
4. **数据绑定**：表单的值与 Vue 实例的数据对象双向绑定，方便获取和处理用户的选择。 5. **可配置性**：组件的样式、布局、提示信息等都可以通过配置项进行调整，满足不同的设计需求。 6. **性能优化**：利用 ...
vue-admin-template-4.4.0.zip
03-01
1. **Vue.js**：Vue.js的核心特性包括组件化、虚拟DOM、响应式数据绑定和指令系统。它允许开发者通过声明式语法创建用户界面，并提供了丰富的生命周期钩子和插槽机制，便于理解和组织代码。 2. **前端框架**：Vue....
vue-admin-template-master-3.8.0.zip
03-01
Vue-admin-template是一个强大的、高度可定制化的后台管理系统模板，它利用了Vue.js的特性，结合了Element UI组件库，提供了一套完整的布局、导航、表格、表单、图表等基础功能，帮助开发者快速实现后台管理界面的...
Vue基础-09-表单输入绑定
xx661660的博客
07-04 584
Vue中想要操作表单的数据，无需再dom操作。比如登录、注册、添加Vue中提供了一个指令v-model，可以表单的双向数据绑定表单原始上面通过v-model绑定一个属性，当默认有属性值的，将值回显表单元素里面当你表单里输入了内容，默认将值赋值变量。这个过程就是双向绑定过程。原理：MVVM架构 架构：只是一种理念，提供了一种设计思路，本身并没有引入任何代码。你按照这个思路写代码，代表用了这种架构。 MVC架构：Vue内部设计的一种思想，MVVM：三部分构成M:Model（模型），再Vue中表示的就是data数
vue-表单输入绑定
weixin_34413357的博客
09-04 141
表单输入绑定 1、基本语法 可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素 1.1、文本 <div id="app"> {{msg}} <input v-model="msg"> </div> <script> ...
09、Vue表单输入绑定
Dhun_LI的博客
09-14 165
Vue表单输入绑定   这两天等待教资审核等到崩溃，还好报上名了，然后就继续学习vue了，今天学习的是Vue表单输入绑定，要实现的是使用v-model（双向数据绑定）自动收集数据，今天只是学了一部分。 效果图如下： 这里主要是带选择框的表单提交，完整代码如下： <body> <!-- 1.使用v-model（双向数据绑定）自动收集数据 text/textarea radio select --> <div id="demo"> <f
vue.js(10)-表单输入绑定
一个人的江湖
01-02 959
基础用法 你可以用 v-model 指令在表单 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 注意： (1) v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数
VUE表单输入绑定
李继轩的博客
10-19 986
vue表单输入绑定
vue 表单 绑定
wngzhem的博客
11-24 1045
vue的表单 使用v-model来绑定数据
vue——表单绑定
weixin_54362381的博客
08-22 739
Vue中的表单绑定 1、v-model指令只能在input、select、textarea这三类标签上使用 注意： （1）用在select标签时，推荐第一项设置为‘<option disabled>--请选择--</option>’，增强用户体验。 （2）用在select标签时，如果给option设置value属性，select框对应的数据的值会变成选中的option的value值；如果option没有设置value值，那select对应的数据值会是option的innerText值
Vue基础（表单输入绑定）
Vivianluolita的专栏
12-20 782
基础用法 你可以用 v-model 指令在表单 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。
Vue表单控件绑定
qq_46149597的博客
11-04 1069
应用v-model绑定文本框、应用v-model绑定复选框、应用v-model绑定下拉菜单、应用v-model绑定到动态属性
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值