常见问题

用于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>

1
2
3
4
5
6

对象绑定

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

json绑定

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

1
2
3
4
5
6
7
8

# style绑定

注意

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

数组绑定

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

1
2

对象绑定

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

1
2

三元表达式

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

data对象绑定

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

1
2
3
4
5
6
7

# 2.data中引入图片

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

#vue问题

上次更新: 2024/10/09, 16:59:47

← Vue-CLI uni-app→