vue for img

Vue对于图片的使用是非常方便和灵活的。在Vue中，可以使用v-bind指令来绑定src属性来显示图片，例如：

<template>
<div>
<img v-bind:src="imgUrl" alt="vue for img">
</div>
</template>

<script>
export default {
data() {
return {
imgUrl: './img/vue.png',
};
},
};
</script>

这个例子中，我们通过v-bind指令将imgUrl数据绑定到img标签的src属性上，然后Vue会自动将数据渲染成对应的图片。如果我们需要在不同的场景中使用不同的图片，只需要更改imgUrl数据即可。

此外，Vue还支持对图片进行动态变换，例如添加鼠标悬停事件来改变图片。可以使用v-on指令来添加事件监听器，例如：

<template>
<div>
<img v-bind:src="imgUrl" v-on:mouseover="changeImg" v-on:mouseout="resetImg" alt="vue for img">
</div>
</template>

<script>
export default {
data() {
return {
imgUrl: './img/vue.png',
hoverImgUrl: './img/vue-hover.png',
};
},
methods: {
changeImg() {
this.imgUrl = this.hoverImgUrl;
},
resetImg() {
this.imgUrl = './img/vue.png';
},
},
};
</script>

这个例子中，我们在img标签上添加了鼠标悬停事件和鼠标移出事件，并通过methods方法来定义changeImg和resetImg方法来实现动态变换。当鼠标悬停在图片上时，imgUrl会被改变为hoverImgUrl，当鼠标移出时，imgUrl会被重置。

总而言之，Vue对于图片的使用非常灵活，我们可以使用v-bind指令来绑定数据，也可以使用v-on指令来添加事件监听器来实现动态变换。