VUE之v-bind类名与样式绑定

• 课程

• （1）v-bind回顾

• （2）class-对象语法

• （3）class-数组语法

• （4）内联样式style-对象语法

• （5）内联样式style-计算属性语法

前言

• DOM元素经常动态绑定一些类名或者style样式，本节讲解下使用v-bind指令绑定class与style的多种方法。
• 之前介绍过v-bind基本用法及语法糖，主要用于动态更新HTML元素属性，接下来简单回顾下。

(1)v-bind回顾 (动态属性修饰符：v-bind)

• v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新。
  
• 语法格式1：单个语法格式
• v-bind:attributeName=variable

<div id="demo">
			<a 
			v-bind:class="classValue"
			v-bind:title="titleValue"
			v-bind:target="targetValue"
			v-bind:href="hrefValue"
			>{
  {text}}</a>
</div>
var demo = new Vue({
			el:'#demo',
			data:{
				text:'百度',
				classValue:'one two three',
				titleValue:'百度一下，你就知道',
				targetValue:'触发者',
				hrefValue:'www.baidu.com'
			}
		}) 		

• 语法格式2：对象语法格式
• v-bind=“{attributeName1:variable1,attributeName2:variable2,……}”
• 案例：在页面中利用Vue