vue 指令 --- v-bind

一般用于对标签中的属性进行操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .ig {
            border: 2px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <img src='xx.png' class='c1' />
    
    <img alt="" v-bind:src="imageUrl" v-bind:class="cls">

</div>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            imageUrl: 'https://hcdn2.luffycity.com/media/frontend/public_class/PY1@2x_1566529821.1110113.png',
            cls: "ig",
        }
    })
</script>
</body>
</html>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .ig {
            border: 2px solid red;
        }

        .info {
            color: red;
        }

        .danger {
            font-size: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <img src='xx.png' class='c1'/>

    <img alt="" v-bind:src="imageUrl" v-bind:class="cls">

    <h1 v-bind:class="{info:v1,danger:v2}">你好呀111</h1>
    <h1 v-bind:class="clsDict">你好呀</h1>

    <h2 v-bind:class="[a1,a2]"></h2>
    <h2 v-bind:class="[1===1?a1:'y',a2]">111</h2>

    <h3 v-bind:style="{ color:clr,fontSize:size+'px'}">222</h3>
    <h3 style="color: red;font-size: 19px">333</h3>

    <input type="button" value="点我" v-on:click="clickMe">
</div>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            imageUrl: 'https://hcdn2.luffycity.com/media/frontend/public_class/PY1@2x_1566529821.1110113.png',
            cls: "ig",
            v1: true,
            v2: true,
            clsDict: {
                info: false,
                danger: false
            },
            a1: "info",
            a2: "danger",
            clr: "red",
            size: "19",
        },
        methods:{
            clickMe:function () {
                this.v1 = false;
            }
        }
    })
</script>
</body>
</html>

v-bind注意：

  • 简写的格式::属性名=xxx，例如：

    <h1 v-bind:class="v1"></h1>
<h1 :class="v1"></h1>
<img :src="xx" />

  • v-bind属于单向绑定（ JS修改->HTML修改 )。

posted @ 2022-08-02 23:14  下个ID见  阅读(40)  评论(0)    收藏  举报