数据绑定的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,
  }
}

  1. 内敛样式绑定
<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'
    }
  }
}