Vue学习之小案例（一）

最新推荐文章于 2024-07-23 17:06:34 发布

Icon_酱

最新推荐文章于 2024-07-23 17:06:34 发布

阅读量429

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/yyticon/article/details/86490342

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue学习之小案例（一）

- input与label的数据绑定

input与label的数据绑定

案例描述

在页面上有一个输入框（input）和一个按钮（button）和一个lable标签，当在输入框中输入内容时，lable所对应的值也会发生改变，当点击按钮时，输入框清空，lable值变为默认。

CSS代码

<style type="text/css">
			#test01{
				padding: 20px;
    			text-align: center;/*①让div里面的内容居中*/
    			width: 24%;        /*//②和③一起的作用是让整个div在页面中居中*/
    			margin: 0 auto;    /*//③*/
    			background-color: #fde406;
			}
</style>

HTML代码

<body>
		<div id="test01">
			<input type="text" v-model="message"/>
			<button v-on:click="clearAll">清除</button><br />
			<label >输入框输入的内容为：{{message}}</label>
		</div>
</body>

vue代码

<script type="text/javascript">
		var vm = new Vue({
			el:'#test01',
			data:{
				message:"小测试"
			},
			methods:{
				clearAll:function(){//清除输入框的内容
					this.message="";		
				}
			}
		})
	</script>

效果图
在这里插入图片描述