vue v-bind

图片url

<img v-bind:src="img_url" >
img_url--->data

绑定style

<div id="app">
			<!-- 对象语法 -->
			<h2 :style="{fontSize:size+'px'}">{{msg}}</h2>
			<!-- 数组语法 -->
			<h2 :style="[baseStyle]">{{msg}}</h2>
		</div>
		<script src="../vue.js"></script>
		<script>
			// let 是变量  const是常量
			let app = new Vue({
				el:'#app',
				data:{
					msg:'不知道',
					size:50,
					baseStyle:{backgroundColor:'red'}
					}
				})
		</script>

动态绑定class

//对象语法
<div id="app">
			<!-- <h2 v-bind:class="{name:bool}"></h2> -->
			<!-- <h2 v-bind:class="{active:isactive,line:ac}">{{msg}}</h2> -->
			<h2 v-bind:class="getclass()">{{msg}}</h2>	
			<button v-on:click="btnclick">按钮</button>
		</div>
		<script src="../vue.js"></script>
		<script>
			let app = new Vue({
				el:'#app',
				data:{
					msg:'不知道',
					isactive:true,
					ac:false
					},
					methods:{
						btnclick:function(){
						//点击按钮变色
							this.isactive= !this.isactive
						},
						getclass:function(){
							return {active:this.isactive,line:this.ac}
						}
					}
				})
		</script>

//数组语法
<div id="app">
			<h2 :class="[active,line]">{{msg}}</h2>
			<h2 :class="getclass()">{{msg}}</h2>		</div>
		<script src="../vue.js"></script>
		<script>
			let app = new Vue({
				el:'#app',
				data:{
					msg:'不知道',
					active:'aaa',
					line:'fghj'
					},
					methods:{
						getclass:function(){
							return [this.active,this.line]
						}
					}
				})
		</script>