前端之家收集整理的这篇文章主要介绍了
详解VUE中v-bind的基本用法,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这两天学习了v-bind的基本用法,所以,今天添加一点小笔记。
1. v-bind:class(根据需求进行选择)
1.1
.
Box{
background-color: #ff0;
}
.textColor{
color: #000;
}
.textSize{
font-size: 30px;
}
<div id="app">
<span class="Box" :class="{'textColor':isColor,'textSize':isSize}">我是字
.
Box{
background-color: #ff0;
}
.textColor{
color: #0f0;
}
.textSize{
font-size: 30px;
}
Box" :class="[classA,classB]">我是字
.
Box{
background-color: #ff0;
}
.textColor{
color: #0f0;
}
.textSize{
font-size: 30px;
}
Box" :class="[isA?classA:'',classB: 'textSize',isA: false
}
})
2.v-bind:style (根据需求进行选择,驼峰式)
2.1
Box" :style="{color:activeColor,fontSize:size,textShadow:shadow}">我是字