为什么在uniapp项目中,使用v-bind属性绑定image标签的src,不可以进行切换图片(vue3写法,没有this概念)
时间: 2024-03-17 17:43:49 浏览: 127
在Vue3中,`this`概念已经被废弃,可以使用`ref`或`setup`来访问组件实例或组件的属性和方法。
如果你在uni-app项目中使用Vue3,可以使用`ref`来访问组件实例,然后通过访问组件实例的属性和方法来切换图片。具体实现方式如下:
HTML部分:
```html
<template>
<view>
<image :src="imgSrc" @click="changeImage"></image>
</view>
</template>
```
JavaScript部分:
```javascript
<script>
import { ref } from 'vue'
export default {
setup() {
const imgSrc = ref('@/assets/image1.jpg')
function changeImage() {
if (imgSrc.value === '@/assets/image1.jpg') {
imgSrc.value = '@/assets/image2.jpg'
} else {
imgSrc.value = '@/assets/image1.jpg'
}
}
return {
imgSrc,
changeImage
}
}
}
</script>
```
在上面的代码中,我们使用了Vue3的`ref`函数来定义了一个`imgSrc`变量。在`setup`函数中,我们定义了`changeImage`方法,与Vue2中的实现方式类似。需要注意的是,在Vue3中,我们需要使用`imgSrc.value`来获取或修改`imgSrc`的值。最后,我们通过`return`语句将`imgSrc`和`changeImage`方法暴露出来,以便在模板中使用。
需要注意的是,在Vue3中,`setup`函数是组件实例创建之前被调用的,因此我们不能在`setup`函数中使用`this`来访问组件实例,需要使用`ref`或其他方式来访问组件实例的属性和方法。
阅读全文
相关推荐


















