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