本節(jié)知識點
v-bind 指令是處理HTML中的標(biāo)簽屬性的。例如<div></div>就是一個標(biāo)簽，<img>也是一個標(biāo)簽。我們綁定<img>上的src進行動態(tài)賦值
v-bind指令有個簡寫指令就是: 例如
:here = "imgsrc"
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<img v-bind:src="imgsrc" alt="">
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
imgsrc:"images/1.jpg"
}
})
</script>
</html>
綁定css樣式
- 直接綁定css樣式
<div :class="classa">直接綁定類</div>
- 綁定classa并進行判斷要是flag為true的時候就是顯示樣式。要是false就不顯示
<div :class="flag?classa:classb"></div>
<li :class="{'active':currentIndex==index}" v-for="(content,index) in singerListRight" :key="index">{{content}}</li>
- 綁定很多個類，比如數(shù)組
<div :class="[classa,classc]">合并所有的類</div>
- 綁定style元素
<div :style="styleobj">對象方式的類</div>
所有代碼合集
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<style>
*{margin:0px;padding:0px;}
.red{color:red;}
.green{color:green;font-size:36px;}
.all{font-size:24px;}
</style>
<div id="app">
<img v-bind:src="imgsrc" alt="">
<div :class="classa">哈哈哈</div>
<div :class="flag?classa:classb">呵呵呵</div>
<div :class="[classa,classc]">合并所有的類</div>
<div :style="styleobj">對象方式的類</div>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
imgsrc:"images/1.jpg",
classa:"red",
flag:false,
classb:"green",
classc:"all",
styleobj:{
fontSize:"36px",
color:"red"
}
}
})
</script>
</html>
