Vue双向绑定v-model

最新推荐文章于 2024-10-30 13:27:58 发布

原创最新推荐文章于 2024-10-30 13:27:58 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端笔记专栏收录该内容

12 篇文章

订阅专栏

本文介绍了Vue.js中v-model指令的应用，展示了如何实现表单输入控件与Vue实例数据的双向绑定。通过两个示例，详细解释了v-model如何同步视图与数据的变化，并结合v-if指令展示条件渲染。

例子1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app"> 
		    //通过v-model将视图和数据绑定，当视图的数据人为改变，vm的data属性也会变化
			输入的文本：<input type="text" v-model="msg">{{msg}} 
			<br>
			<select v-model="selected">
				<option value='' disabled="disabled">---请选择---</option>
				<option>A</option>
				<option>B</option>
				<option>C</option>
			</select>  
		</div>
		
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					msg:"hello,Vue!",
					selected:''
				}
			});
		</script>
	</body>
</html>

在这里插入图片描述
注意：
v-model会忽略表单元素(input,textarea,select)的value、checked、selected特性的初始值而总是将vue实例的数据作为来源。可以通过js在组件data选项中声明初始值。

例子2

<div id="app">
	<input type="checkbox" v-model="isSelected" />是否勾选
	<h1 v-if="isSelected">勾选</h1>
	<h1 v-else>未勾选</h1>
</div>
 
<script>
	var vm = new Vue({
		el:"#app",
		data:{
			isSelected:false
		}
	});
</script>