vue当点击选择一张图片后另一处变成那张选中的图片
时间: 2023-07-06 07:20:32 浏览: 159
Vue实现点击显示不同图片的效果
如果你想实现点击选择一张图片后,另一处会显示选中的图片,可以使用Vue.js的数据绑定和事件绑定功能来实现。
首先,在Vue组件的data选项中定义一个变量,用于存储当前选择的图片的路径,例如:
```
data() {
return {
selectedImage: ''
}
}
```
然后,在模板中使用v-bind指令将该变量绑定到选择图片的标签的value属性上,并使用v-on指令绑定change事件,例如:
```
<input type="file" accept="image/*" v-bind:value="selectedImage" v-on:change="selectImage">
```
接下来,在另一处的图片标签上使用v-bind指令将其src属性绑定到selectedImage变量上,例如:
```
<img v-bind:src="selectedImage" alt="显示选中的图片">
```
最后,在Vue组件的methods选项中定义一个方法,用于更新selectedImage变量的值,例如:
```
methods: {
selectImage: function(event) {
this.selectedImage = URL.createObjectURL(event.target.files[0]);
}
}
```
这样,当选择图片的标签发生change事件时,selectImage方法会被调用,selectedImage的值会更新为选择的图片的路径,从而在模板中显示选择的图片。
阅读全文