一.案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用指令v-bind</title>
<style>
.active{
background-color: plum;
font-size: 20px;
color: white;
}
</style>
</head>
<body>
<div id="app">
<!--绑定属性-->
<img v-bind:src="srcImg" />
<!--缩写方式-->
<img :src="srcImg" />
<!--动态绑定样式-->
<p v-for="(col,index) in colleges" :class="index == 2 ? 'active':''">
{{col}}
</p>
<p :style="{color:fontColor}">今天适合写代码</p>
</div>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
//1.创建Vue的实例
let vm=new Vue({
el:'#app',
data:{
srcImg:'img/pet001_640x340.jpg',
colleges:[
'中山大学',
'华南理工大学',
'厦门大学',
'中央戏剧学院',
'武汉大学',
'暨南大学',
'华南农业大学'
],
fontColor:'red'
}
});
</script>
</body>
</html>
二.结果
