10.v-bind指令 

<style>
        img {
            width: 300px;
        }
        
        .active {
            border: 2px solid red;
        }
    </style>
<body>
    <div id="app">
        <img v-bind:src="imgsrc" alt="">
        <img :src="imgsrc" :title="istitle" alt="" :class="isActive? 'active':'' " @click="toggleActive">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        // v-bind 指令的作用是 为元素 动态绑定属性 比如 class src title
        // 完整写法是 v-bind:属性名
        // 简写的话 可以直接省略 v-bind 只保留  :属性名
        var app = new Vue({
            el: '#app',
            data: {
                imgsrc: "image/yy.jpg",
                istitle: "我的宝贝",
                isActive: false
            },
            methods: {
                toggleActive: function() {
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
</body>

 

posted @ 2020-12-28 21:55  闭上耳朵  阅读(43)  评论(0)    收藏  举报