v-bind
用于将html标签属性交给vue实例管理，这样就可以通过vue来动态修改html标签属性了
v-bind:
可以用
:
来代替，如
v-bind:src=""
可以写成
:src=""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<style>
.bgblue {
width: 200px;
height: 200px;
background-color: blue;
}
.bgpink {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<img width="200px" height="100px" v-bind:src="srcvalue">
<button @click="changeImage">更换图片</button>
<hr>
<div v-bind:class="bg"></div>
<button @click="changeBackground">更换背景色</button>
<hr>
<!-- v-bind: 可以简写成 : -->
<div :class="bg"></div>
<button @click="changeBackground">更换背景色</button>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
srcvalue: "img/a.jpg",
bg: "bgblue"
},
methods: {
changeImage() {
this.srcvalue = "img/b.jpg"
},
changeBackground() {
this.bg = "bgpink"
}
}
});
</script>
版权声明：本文为weixin_45867159原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。