在數據綁定中，最常見的兩個需求就是元素的樣式名稱 class 和內聯樣式 style 的動
態綁定
一、動態綁定href和src
使用v-bind動態設置鏈接的 href 屬性和圖片的 src 屬性，當數據變化時，就會重新渲
染。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- v-bind的作用：綁定活的屬性！！ -->
<div id="app">
<a v-bind:href="url">我是百度</a>
<img :src="imgUrl" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
url:'https://www.baidu.com',
imgUrl:'https://www.baidu.com/img/bd_logo1.png'
}
})
</script>
</body>
</html>執行結果
當我們改變url的值，a連接就指向了淘寶
二、動態綁定 class 的幾種方式
1、普通綁定class
2、class 對象語法
給 vbind:class 設置一個對象，可以動態地切換 class。
綁定class對象語法,對象的鍵是類名，值是布爾值.如果布爾值是true，代表該元素添加了對應的class，爲false，則沒有添加
<div :class="{divStyle :isActive,borderStyle:isBorderActive}"></div><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.divStyle{
background-color: darkred;
width: 100px;
height: 100px;
}
.borderStyle{
border: 6px solid yellow;
}
</style>
</head>
<body>
<div id="app">
綁定class對象語法,對象的鍵是類名，值是布爾值.如果布爾值是true，代表該元素添加了對應的class，爲false，則沒有添加
<div :class="{divStyle :isActive,borderStyle:isBorderActive}"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
isActive:true, //代表給div添加了divstyle
isBorderActive:true,
}
})
</script>
</body>
</html>**當 class 的表達式過長或邏輯複雜時，還可以綁定一個計算屬性，這是一種很友好和常見的
用法，一般當條件多於兩個時， 都可以使用 data 或 computed**
<style>
.active{
background-color: black;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<div :class="classNames">計算屬性</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
isActive:true, //代表給div添加了divstyle
isBorderActive:false
},
computed:{
classNames:function(){
return {
active:this.isActive&& !this.isBorderActive
}//return一個對象，active是鍵名，值是布爾值，因爲很複雜
}
}
})
</script> 3、數組語法
當需要應用多個 class 時， 可以使用數組語法 ， 給：class 綁定一個數組，應用一個 class
列表：數組成員直接對應className--類名
<style>
.active{
background-color: black;
width: 100px;
height: 100px;
}
.error{
border: 6px solid yellow;
}
</style>
</head>
<body>
<div id="app">
綁定class數組語法,數組中的成員直接對應類名<br>
<div style="color:#fff" :class="[activeclass,errorclass]">我是數組綁定class</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
activeclass:'active',
errorclass:'error'
}
})
</script> 4、數組和class對象混用——————看演示
errorclass永遠存在，active看情況存在
<style>
.active{
background-color: black;
width: 100px;
height: 100px;
}
.error{
border: 6px solid yellow;
}
</style>
</head>
<body>
綁定class：<br>
<div id="app">
數組和對象混用，第一個成員是對象，第二個成員是數組成員<br>
<div style="color:#fff" :class="[{active:isActive},errorclass]">數組</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
isActive:true,
errorclass:'error'
}
})
</script>5、 在組件上使用 : 暫時不考慮—挖坑
三、綁定內聯樣式
使用 vbind:style （即：style ） 可以給元素綁定內聯樣式，方法與 ：class 類似，
也有對象語法和數組語法，看起來很像直接在元素上寫 CSS:
注意 : css 屬性名稱使用駝峯命名（ came!Case ）或短橫分隔命名（ kebabcase
），
- 對象語法
<div :style="{'color':color,'fontSize':fontSize +'px'}">數組</div>//注意要加px- 數組語法，很不常見，較爲常用 的應當是計算屬性
</head>
<body>
<div id="app">
對象語法綁定內聯樣式：鍵代表style的屬性值，值代表屬性對應的值了。<br>
駝峯寫法：vue中只要是大寫字母，就會給你轉換成-和小寫。<br>
<div :style="{'color':color,'fontSize':fontSize +'px'}">數組</div>
</div>
<div id="app2">
style數組語法綁定內聯樣式<br>
<div :style="[styleA,styleB]">數組</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
color:'red',
fontSize:16
}
})
var app2=new Vue({
el:'#app2',
data:{
styleA:{
width:'100px',
border:'1px solid red'
},
styleB:{
color:'blue'
}
}
})
</script> 使用 :style 時， Vue .js 會自動給特殊的 css 屬性名稱增加前綴， 比如 transform 。
無需再加前綴屬性！！！