我们还记得在dom元素内容中显示vue对象中的data数据时,是使用两个花括号,但是在dom元素的属性值需要动态绑定数据时,需要用到v-bind;
v-bind
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<img v-bind:src="imgUrl"/>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
imgUrl:'http://img14.360buyimg.com/babel/s1180x940_jfs/t1/160978/22/12687/137221/604dbbc1E7265443b/aaf3cb774743d444.jpg.webp'
}
});
</script>
</body>
</html>
效果图: