一个简单的例子让你理解v-model和v-bind的区别

最新推荐文章于 2024-01-30 20:02:10 发布

luomo0203

最新推荐文章于 2024-01-30 20:02:10 发布

阅读量266

点赞数 2

本文链接：https://blog.csdn.net/luomo0203/article/details/104929979

版权

v-model用法实例

v-model: 实现数据的双向绑定(MVVM)，注意 v-model 只能用在表单元素当中。
如下代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input v-model="test">
			{{test}}
		</div>
	</body>
<script>
	var app = new Vue({
		el: '#app',
			test:'this is test'
		}
	});
</script>
</html>

在这里插入图片描述

双向绑定最大的好处是我们不再需要用jQuery去查询表单的状态，而是直接获得了用JavaScript对象表示的Model。

v-bind用法实例

v-bind只能从 M -> V，不能从V -> M。v-bind可以缩写成:

在开发的时候，有时候我们的属性不是写死的，有可能是根据我们的一些数据动态地决定的，比如图片标签（<img>）的src属性，我们可能从后端请求了一个包含图片地址的数组，需要将地址动态的绑定到src上面，这时就不能简单的将src写死。还有一个例子就是a标签的href属性。这时可以使用v-bind指令：

如下代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<a v-bind:href="baidu">去百度</a>
			<p v-bind:class="myclass">hello vue</p>
			
			{{msg}}
			<input :value="msg" />
			
		</div>
	</body>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			baidu:'https://www.baidu.com/',
			myclass: 'blue',
			msg:'my name is luomo'
		}
	});
</script>
<style>
	.blue{
		color: #0000FF;
		font-size: 25px;
	}
</style>
</html>

在这里插入图片描述
当v-bind和v-model同时用在一个元素上时，它们各自的作用没变，但v-model优先级更高，而且需要区分这个元素是单个的还是一组出现的。

这只是vue模板语法中最简单的例子，如果想更加深入学习大家可以去vue官网学习更深层次的知识。

luomo0203

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单的例子让你理解v-model和v-bind的区别

v-model用法实例v-model: 实现数据的双向绑定(MVVM)，注意 v-model 只能用在表单元素当中。如下代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js"...
复制链接

扫一扫