uni-app 点击按钮切换图片或文字
<template>
<view>
<!-- 点击按钮切换图片或文字 -->
<view catchtouchmove="false" style="display: flex;">
<button @click="onClick1">点击按钮 111</button>
<button @click="onClick2">点击按钮 222</button>
</view>
<text>{{imageUrl}}</text>
<image style="width: 100%;height: 300rpx;" :src="imageUrl"></image>
</view>
</template>
<script>
export default {
data() {
return {
// 显示初始图片
imageUrl: "https://cdn.uviewui.com/uview/swiper/swiper1.png", //要显示的图片路径
}
},
methods: {
onClick1() {
console.log('111 按钮被点击了')
this.imageUrl = "https://cdn.uviewui.com/uview/swiper/swiper1.png";
},
onClick2() {
console.log('222 按钮被点击了')
this.imageUrl = "https://cdn.uviewui.com/uview/swiper/swiper3.png"
}
},
}
</script>
<style>
</style>