Vue.js-表单数据双向绑定

最新推荐文章于 2023-06-05 10:47:07 发布

wj振藩

最新推荐文章于 2023-06-05 10:47:07 发布

阅读量456

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js 文章标签： vue.js 数据绑定

本文链接：https://blog.youkuaiyun.com/qq_25652949/article/details/84844234

vue.js 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vue.js中如何使用v-model实现表单数据的双向绑定，包括文本数据的绑定、HTML代码的插入、属性绑定及表达式的使用。通过一个具体的实例展示了Vue实例的创建过程，以及如何在HTML中使用数据绑定和方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单数据的绑定

文本数据:绑定使用 {{…}}两个大括号
html代码:v-html
属性: v-bind
表达式:{{…}}内写

vue的实例

var vm = new Vue({
	el:"元素选择器",
	data:{//数据
		data1:"hello",
		data2:"i'm lily"
	},
	methods{
		funtion1:function(){
			// do something
		},
		funtion2:function(){
			// do something
		}
	}
});

html代码

<html>
<title></title>
<head></head>
<body>
<div id="test">
	<p>{{msg}}</p>
	<input type="text" v-model="msg"/>
</div>
<script src="/VueProject/vue.js"></script>
<script>
	var vm = new Vue({
		el:"#test",
		data:{
			msg:'hello,我是最开始的内容哦'
		},
		methods:{
			reset:function(){
				this.msg = "hello,我被重置了";
			}
		}
	});
</script>
</body>
</html>