這篇文章主要介紹了詳解VUE中v-bind的基本用法 ，內容挺不錯的，現在分享給大家，也給大家做個參考。
這兩天學習了v-bind的基本用法，所以，今天再加一點小筆記。
1. v-bind:class（根據需求選擇）
#1.1
##
<style>
.box{
background-color: #ff0;
}
.textColor{
color: #000;
}
.textSize{
font-size: 30px;
}
</style>
<p id="app">
<span class="box" :class="{'textColor':isColor, 'textSize':isSize}">我是字</span>
</p>
<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>
<p id="app">
<span class="box" :class="classObject">我是字</span>
</p>
<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>
<p id="app">
<span class="box" :class="[classA,classB]">我是字</span>
</p>
<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>
<p id="app">
<span class="box" :class="[isA?classA:'', classB]">我是字</span>
</p>
<script>
new Vue({
el: "#app",
data:{
classA: 'textColor',
classB: 'textSize',
isA: false
}
})
</script>登入後複製
2.v-bind:style (依需求選擇，駝峰式)
# 2.1
<p id="app">
<span class="box" :style="{color:activeColor, fontSize:size,textShadow:shadow}">我是字</span>
</p>
<script>
new Vue({
el: "#app",
data:{
activeColor: 'red',
size: '30px',
shadow: '5px 2px 6px #000'
}
})
</script>登入後複製
2.2
<p id="app">
<span class="box" :style="styleObject">我是字</span>
</p>
<script>
new Vue({
el: "#app",
data:{
styleObject:{
color: 'red',
fontSize: '30px',
textShadow: '5px 2px 6px #000'
}
}
})
</script>登入後複製
2.3
<p id="app">
<span class="box" :style="[styleA,styleB]">我是字</span>
</p>
<script>
new Vue({
el: "#app",
data:{
styleA:{
fontSize: '30px',
color: 'red'
},
styleB:{
textShadow: '5px 2px 6px #000'
}
}
})
</script>登入後複製
2.4
#
<p id="app">
<span class="box" :style="[isA?styleA:'', styleB]">我是字</span>
</p>
<script>
new Vue({
el: "#app",
data:{
styleA:{
fontSize: '30px',
color: 'red'
},
styleB:{
textShadow: '5px 2px 6px #000'
},
isA: false
}
})
</script>登入後複製
3.v-bind:src
<p id="app">
<img :src="url" />
</p>
<script>
new Vue({
el: "#app",
data:{
url: "../img/pg.png"
}
})
</script>登入後複製
4.v-bind:title
<p id="app">
<p :title="message">我是字</p>
</p>
<script type="text/javascript">
new Vue({
el: "#app",
data:{
message:"我是吱吱"
}
})
</script>登入後複製
#以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
###Vue.js結合Ueditor富文本編輯器的使用方法###############vue的專案最佳化之透過keep-alive資料快取的方法###############Vue元件選項props的使用介紹#################### #######
以上是VUE中v-bind的用法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
