v-bind
- 作用:动态绑定数据
- 简写: :
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.active{
border: 1px solid red;
}
</style>
</head>
<div id="app">
<img v-bind:src="imgSrc" alt="大傻逼">
<br />
<img :src="imgSrc" :title="imgTitle+'加油呀'" :class="{active:isActive}" @click="toggleActive()">
</div>
<body>
<script>
var app =new Vue({
el:"#app",
data:{
imgSrc:"http://www.itheima.com/images/logo.png",
imgTitle:"黑马程序员",
isActive:false,
},
methods:{
toggleActive:function(){
this.isActive = !this.isActive
}
}
})
</script>
</body>
</html>
第一张图片仅绑定了src的地址在data里面存储
第二张图片绑定了标题和样式设置一个单击事件来控制isActive的布尔值来间接控制样式