uni-app 点击按钮切换图片或文字

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>