Vuev-bind的使用
Posted 栗栗本栗
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vuev-bind的使用相关的知识，希望对你有一定的参考价值。
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>
以上是关于Vuev-bind的使用的主要内容，如果未能解决你的问题，请参考以下文章