Vue之属性绑定和双向属性绑定

最新推荐文章于 2024-04-18 22:48:34 发布

zyupupup

最新推荐文章于 2024-04-18 22:48:34 发布

阅读量348

点赞数

分类专栏： vue学习笔记文章标签：属性绑定双向绑定

本文链接：https://blog.csdn.net/zyupupup/article/details/103513578

版权

vue学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

v-bind单向绑定，是把数据传到html,v-bind:href可以简写为 :href

v-model属性双向绑定，可以把数据传到input中，同时在input中进行改动时，js中也会同步获取数据this.name

需要注意这些后面可以加些修饰符

lazy 相当于监听change操作，只有在失去焦点的时候，才会进行数据绑定了(v-bind.lazy)
number v-model默认是string类型，可以通过.number方式确保获取到的是数字类型(v-model.number)
trim 去掉前后的空白(v-model.trim)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div1">
			<a v-bind:href="page">bing</a>
			<!-- v-bind:href简写是 :href -->
			<a :href="page">bing</a>
		</div>
		<div id="div2">
			<!--v-model.lazy相当于监听change操作，只有在失去焦点的时候，才会进行数据绑定了
				v-model.trim去掉前后的空白-->
			
			昵称：<input v-model.lazy='name' placeholder="输入昵称" type="text" />
			<br><span>{{name}}</span>
			<button @click="getNumber()">获取数据</button>
			数字：<input v-model.number="number" type="number" placeholder="请输入数字"/>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#div1',
				data:{
					page: 'https://cn.bing.com/'
				}
			})
			new Vue({
				el:'#div2',
				data:{
					name:'',
					number:''
				},
				methods:{
					getName:function(){
						alert(this.name);
					},
					getNumber:function(){
						alert(typeof this.number);
						alert(this.number.charCodeAt());
					}
				}
			})
		</script>
	</body>
</html>

zyupupup

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue之属性绑定和双向属性绑定

v-bind单向绑定，是把数据传到html,v-bind:href可以简写为 :hrefv-model属性双向绑定，可以把数据传到input中，同时在input中进行改动时，js中也会同步获取数据this.name需要注意这些后面可以加些修饰符lazy 相当于监听change操作，只有在失去焦点的时候，才会进行数据绑定了(v-bind.lazy) number v-model...
复制链接

扫一扫