vue数据绑定、类名和样式绑定

数据绑定的2种方式：

1. 单向绑定 v-bind：数据只能从data流向页面

2. 双向绑定 v-model：data->view view->data

   注： 双向绑定一般都应用在表单类元素上（如:input、select、textarea）,因为他们都有value属性，页面上可以进行修改。

绑定class 和style

需求:点击不同的li，给不同的li添加active这个样式。

1. 对象语法动态绑定类名

<ul class="list clearfix">
  <li class="item" :class="{'active':isActive}">项目1</li>
  <li class="item">项目2</li>
  <li class="item">项目3</li>
</ul>

data(){
  return{
  	isActive:true,
  }
}

2. 内敛样式绑定

<ul class="list clearfix">
  <li class="item" :style="styleData">项目1</li>
  <li class="item">项目2</li>
  <li class="item">项目3</li>
</ul>

data(){
  return{
  	styleData:{
    	backgroundColor:'#424242',
      	color:'#ffffff'
    }
  }
}