Vue基础语法-绑定

Vue基础语法

绑定

1. 属性绑定

* v-bind

v-bind动态绑定一个或多个值
v-bind绑定有简单写法,就是不用写v-bind: 直接使用:冒号

• 代码:

<div id="app">
		<a v-bind:href="link">link</a>
		<!-- 简写 -->
		<a :href="link">link</a>
	</div>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				link:"http://wwww.baidu.com"
			}
		})
	</script>

* v-bind 绑定class

v-bind绑定class,可以接受一个对象也可以接受一个数组

  <style type="text/css">
		.active{
			color: red;
		}
		.fsize{
			font-size: 30px;
		}
		.borderline{
			border: 1px solid red;
		}
	</style>
	
	<div id="app">
		<!-- 方式1 直接通过{}绑定一个类 -->
		<h2 :class="{'active':isActive}">Hello Vue</h2>
		<!-- 方式2 通过判断 绑定多个类 -->
		<h2 :class="{'active':isActive,'fsize':isSize}">Hello Vue</h2>
		<!-- 方式3 和普通类同时存在 并不冲突 -->
		<h2 class="borderline" :class="{'active':isActive,'fsize':isSize}">Hello Vue</h2>
		<!-- 方式4 如果过于复杂可以放到data中 -->
		<h2 :class="classes">Hello Vue</h2>
	</div>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				isActive:true,
				isSize:true,
				classes:['active','fsize','borderline']
			}
		})
	</script>

* v-bind 绑定style

代码：

 <div id="app">
  <!-- 直接绑定对象 -->
  <h2 :style="{color:'red',fontSize:'30px'}">Hello Vue</h2>
</div>

2. v-model

• 一般用于数据的提交,需要使用大量的表单。Vue中使用v-model来实现双向绑定
• 下面的例子是改变文本框的值时data的值也会改变,插值运算符也显示的内容也会改变

 <div id="app">
  <input type="text" name="txt"  v-model="name"/>
  <p>{{name}}</p>
</div>
<script type="text/javascript">
  var app=new Vue({
  	el:"#app",
  	data:{
  		name:"张三"
  	}
  })
</script>

* v-model绑定select例子

* 代码：

  <div id="app">
		<select name="select" v-model="myselect">
			<option value="java">java从入门到精通</option>
			<option value="python">python从入门到精通</option>
			<option value="c++">C++从入门到精通</option>
			<option value="php">php从入门到精通</option>
			<option value="mysql">mysql从入门到跑路</option>
		</select>
	</div>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				myselect:"php"
			}
		})
	</script>