vbind以及class與style的繫結-vue筆記4
摘要：
在資料繫結中，最常見的兩個需求就是元素的樣式名稱 class 和內聯樣式 style 的動
態繫結
一、動態繫結href和src
使用v-bind動態設定連結的 href 屬性和圖片的 src 屬性，當資料變化時，就會重新渲
染。
程式碼：
<!DOCTYPE h...
在資料繫結中，最常見的兩個需求就是元素的樣式名稱 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 。
無需再加字首屬性！！！