28°

Vue v-model v-bind的使用

首先我们来讲一讲区别:

1.v-bind用来绑定数据和属性等,简写:

2. v-model使用在表单中,实现双向数据绑定的 。

直接看代码:

<!doctype html>
<html>
&lt;head&gt;
	&lt;meta charset="utf-8"&gt;
	&lt;title&gt;&lt;/title&gt;
	&lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&gt;
	&lt;script src="https://unpkg.com/vue/dist/vue.js"&gt;&lt;/script&gt;
&lt;/head&gt;

<style> .class1{ background: #444; color: #eee; } </style>

&lt;body&gt;
	
	&lt;!-- v-model使用(双向绑定) v-bind的使用 --&gt;
	&lt;div id="app"&gt;
		&lt;label&gt;Name:&lt;/label&gt;&lt;input type="text" v-model="name"&gt;
		&lt;h4&gt;表单中的姓名{{name}}&lt;/h4&gt;
		
		&lt;label for="r1"&gt;修改颜色&lt;/label&gt;&lt;input type="checkbox" v-model="use" id="r1"&gt;
		  &lt;br&gt;&lt;br&gt;
		  &lt;div v-bind:class="{class1: use}"&gt;
		    v-bind:class 指令
		  &lt;/div&gt;
		  &lt;a v-bind:href="url"&gt;点击一下,查看百度&lt;/a&gt;
	&lt;/div&gt;

&lt;/body&gt;

	&lt;script&gt;
		var v = new Vue({
			el:'#app',
			data:{
				
				name:'张三',
				use:true,
				url:'http://www.baidu.com'
			},
			
		});
	&lt;/script&gt;

</html>

<h4>表单中的姓名显示与表单中的信息同步,这意味着Vue托管的data对象与表单数据统一,我们可以直接用数据做比较,改变样式,或者校验等一系列行为。checkbox与v-model绑定时,通过use这个变量判断是否选中而选择是否用相应的样式修饰,通过数据来驱动图形层的变化。使用Vue我的感觉是前端也更加地面向对象编程了。

本文由【愚蠢的土豆】发布于开源中国,原文链接:https://my.oschina.net/stupidpotato/blog/3196671

全部评论: 0

    我有话说: