用于vue中开发的常见问题

1.动态绑定class和style

class绑定

• 数组绑定

<div :class="['but-one','but-two']"></div>
<div :class="['but-one',{but_one : types == 2}]"></div>
<div :class="['but-one']"></div>  
<div :class="['box',type == 2 ? 'd3' : 'd4']"></div>
<div :class="['with__btn',{disabled: !currentSelceMoney}]"></div>
<div :class="['content',{'content-resiger': model == 'resiger'}]"></div>

• 对象绑定

<div :class="{itembox,color:isactive, actice:item == 1}"></div>

• json绑定

<!-- 
  data中定义
  options: {
    ced_name:true,
    cdd_name:true
  }
-->
<div :class="options">哈哈哈哈</div>

style绑定

注意

• 凡是有-的style属性名都要变成驼峰式，比如font-size要变成fontSize
• 除了绑定值，其他的属性名的值要用引号括起来，比如color:#00a2ff'而不是 color:#00a2ff

• 数组绑定

<div :style="[baseStyles, overridingStyles]"></div>
<div :style="[{color:(index == 1 ? 'green':'#000')},{fontSize:'18px'}]"></div>

• 对象绑定

<div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="{color:(index == 1 ? 'blue' : 'red')}"></div>

• 三元表达式

<div :style="activeLayerName === 1?'font-weight:700' : 'font-weight:400'"></div>

• data对象绑定

<!--
styleObject:{
  color:'green',
  fontSize:'100px'
}
-->
<div :style="styleObject"></div>

2.data中引入图片

icon: require('./img/myCollection.png')