本节知识点
v-bind 指令是处理HTML中的标签属性的。例如<div></div>就是一个标签，<img>也是一个标签。我们绑定<img>上的src进行动态赋值
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>
- 绑定很多个类，比如数组
<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>
