【Vue】v-bind的使用

最新推荐文章于 2024-09-18 08:44:09 发布

Alkaid:

最新推荐文章于 2024-09-18 08:44:09 发布

阅读量204

点赞数

分类专栏： Vue 文章标签： vue.js html html5

本文链接：https://blog.csdn.net/weixin_45867159/article/details/120210616

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>