Vue.js表单修饰符

最新推荐文章于 2024-04-18 08:00:35 发布

碧山云游

最新推荐文章于 2024-04-18 08:00:35 发布

阅读量61

点赞数

分类专栏： Vue.js学习笔记

本文链接：https://blog.csdn.net/qq_41617901/article/details/117048858

版权

Vue.js学习笔记专栏收录该内容

21 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>常用特性</title>
</head>
<body>
	<div id="app">
		<!-- 【1】使用number转换数值 -->
		<!-- <input type="text" v-model="age" /> -->
		使用number修饰符转换数值：<input type="text" v-model.number="age" /><br />
		<!-- 【2】trim修饰符：可以用于去除空格，只能去除起始值和结束的空格，中间的空格没法去掉 -->
		<!-- <input type="text" v-model="msg" /> -->
		使用trim修饰符去除起始和结束的空格：<input type="text" v-model.trim="msg" /><br />
		<!-- 【3】lazy：将input事件切换为change事件 -->
		<!-- <input type="text" v-model="inputValue" /> -->
		使用lazy修饰符将input事件切换为change事件
		<input type="text" v-model.lazy="inputValue" />
		<span>{{inputValue}}</span><br />
		<button type="button" @click="handle">点击我</button>
	</div>
	<script src="js/vue.js" type="text/javascript"></script>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			//data里边表示的是初始化数据
			data:{
				age:'',
				msg:'',
				inputValue:''
			},
			methods:{
				handle:function(){
					console.log(this.age+10);
					console.log(this.msg.length);
				}
			}
			
		})
	</script>
</body>
</html>

碧山云游

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js表单修饰符

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>常用特性</title.
复制链接

扫一扫