<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>