1.通常情况下 v-bind指令需要使用data中的数据作为属性时,是img标签的用法,后面只有src
<img :src="src" alt="">
2.但是如果需要改变样式的时候,里面肯定会有样式名和data中数据两部分,这时候就需要{}了。
<div class="box" :style="{backgroundColor:rgb}"></div>
附源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../day1/vue.js"></script>
<style>
.box{
width: 200px;
height: 200px;
}
img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="app">
<div class="box" :style="{backgroundColor:rgb}"></div>
<img :src="src" alt="">
{{rgb}}
</div>
<script>
const vm=new Vue({
el:'#app',
data:{
r:0,
g:0,
b:0,
src:'https://ts1.cn.mm.bing.net/th/id/R-C.171e8fe1aa1544a1868ab710eed82d82?rik=FLPxvVVL9C9bnQ&riu=http%3a%2f%2fwww.pp3.cn%2fuploads%2fallimg%2f200710%2f14-200G00Z321.jpg&ehk=Lb0IHCCZIdqYQOi28m%2borU8c1ARGbTEC%2f8WYzfwRuHo%3d&risl=&pid=ImgRaw&r=0'
},
computed:{
rgb(){
return `rgb(${this.r},${this.g},${this.b})`
}
},
})
</script>
</body>
</html>