vue.js数据绑定操作详解

选中：

typeof vm.selected //=> object
vm.selected.number //=> 123

6.参数特性

.lazy:默认情况下，v-model在input事件中同步输入框与数据，加lazy属性后会在change事件中同步。

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number:自动将用户输入转为Number类型，如果原值转换结果为NaN，则返回原值。

<input v-model.number="age" type="number">

.trim:如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入

<input v-model.trim="msg">

Class与Style绑定

1.Class绑定

对象语法：

v-bind:class

<div class="tab" v-bind:class="{'active':active,'unactive':!active}"></div>

vm实例中需要包含：

data：{
  active:true
}

渲染结果为：

<div class="tab active"></div>

数组语法：

v-bind:class

<div v-bind:class="[classA,classB]"></div>

vm实例中需要包括：

data:{
  classA:"class-a",
  classB:"class-b"
}

渲染结果为：

<div class="class-a class-b"></div>

使用三元表达式切换数组中的class

<div v-bind:class="[classA,isB?classB:""]"></div>

若

vm.isB = false

则渲染结果为

<div class="class-a"></div>

2.内联样式绑定(style属性绑定)

对象语法：直接绑定符合样式格式的对象。

<div v-bind:style="alertStyle"></div>

vm实例中包含：

data:{
  alertStyle:{
    color: 'red',
    fontSize: '2px'
  }
}

<div v-bind:style="{fontSize:alertStyle.fontSize,color:'red'}"></div>								 
 5/6   首页 上一页 3 4 5 6 下一页 尾页