迷离的夜空，灰黑色的天际悬着一轮金色的孤舟，载着满仓的梦想，驶向云层深处；凉风微微的吹袭着黑夜的素纱，掸掉岁月的风尘；融融的月光静静的流淌，冲断记忆的决堤；零星点点，柔柔的洒在树叶上，泛出浅浅的绿；如华的银色裹住一丝清凉，铺设一地的奢华。
这两天学习了v-bind的基本用法，所以，今天添加一点小笔记。
1. v-bind:class（根据需求进行选择）
1.1
<style>
.box{
background-color: #ff0;
}
.textColor{
color: #000;
}
.textSize{
font-size: 30px;
}
</style>
<div id="app">
<span class="box" :class="{'textColor':isColor, 'textSize':isSize}">我是字</span>
</div>
<script>
new Vue({
el: "#app",
data:{
isColor:true,
isSize:true
}
})
</script>
1.2
<style>
.box{
background-color: #ff0;
}
.textColor{
color: #000;
}
.textSize{
font-size: 30px;
}
</style>
<div id="app">
<span class="box" :class="classObject">我是字</span>
</div>
<script>
new Vue({
el: "#app",
data:{
classObject:{
'textColor': true,
'textSize': true
}
}
})
</script>
1.3
<style>
.box{
background-color: #ff0;
}
.textColor{
color: #0f0;
}
.textSize{
font-size: 30px;
}
</style>
<div id="app">
<span class="box" :class="[classA,classB]">我是字</span>
</div>
<script>
new Vue({
el: "#app",
data:{
classA: 'textColor',
classB: 'textSize'
}
})
</script>
1.4
<style>
.box{
background-color: #ff0;
}
.textColor{
color: #0f0;
}
.textSize{
font-size: 30px;
}
</style>
<div id="app">
<span class="box" :class="[isA?classA:'', classB]">我是字</span>
</div>
<script>
new Vue({
el: "#app",
data:{
classA: 'textColor',
classB: 'textSize',
isA: false
}
})
</script>
2.v-bind:style (根据需求进行选择，驼峰式)
2.1
<div id="app">
<span class="box" :style="{color:activeColor, fontSize:size,textShadow:shadow}">我是字</span>
</div>
<script>
new Vue({
el: "#app",
data:{
activeColor: 'red',
size: '30px',
shadow: '5px 2px 6px #000'
}
})
</script>
2.2
<div id="app">
<span class="box" :style="styleObject">我是字</span>
</div>
<script>
new Vue({
el: "#app",
data:{
styleObject:{
color: 'red',
fontSize: '30px',
textShadow: '5px 2px 6px #000'
}
}
})
</script>
2.3
<div id="app">
<span class="box" :style="[styleA,styleB]">我是字</span>
</div>
<script>
new Vue({
el: "#app",
data:{
styleA:{
fontSize: '30px',
color: 'red'
},
styleB:{
textShadow: '5px 2px 6px #000'
}
}
})
</script>
2.4
<div id="app">
<span class="box" :style="[isA?styleA:'', styleB]">我是字</span>
</div>
<script>
new Vue({
el: "#app",
data:{
styleA:{
fontSize: '30px',
color: 'red'
},
styleB:{
textShadow: '5px 2px 6px #000'
},
isA: false
}
})
</script>
3.v-bind:src
<div id="app">
<img :src="url" />
</div>
<script>
new Vue({
el: "#app",
data:{
url: "../img/pg.png"
}
})
</script>
4.v-bind:title
<div id="app">
<div :title="message">我是字</div>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data:{
message:"我是吱吱"
}
})
</script>
到此这篇关于详解VUE中v-bind的基本用法就介绍到这了。每天早上醒来，你荷包里的最大资产是24个小时——你生命宇宙中尚未制造的材料。更多相关详解VUE中v-bind的基本用法内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
