vue中点击按钮切换图片

最新推荐文章于 2025-04-09 15:44:32 发布

原创最新推荐文章于 2025-04-09 15:44:32 发布 · 7.4k 阅读

42 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

19 篇文章

订阅专栏

vue中点击按钮切换图片

直接附上代码，亲测有效

<!--  -->
<template>
  <div>
    <div class="">
      <button type="primary" @click="one()">我是图片1</button>
      <button type="primary" @click="two()">我是图片2</button>
    </div>

    <!-- 引入图片 -->
    <img id="pic" style="width:80%;" :src="imgArr[0]">

  </div>
</template>

<script>
export default {
  data() {
    //这里存放数据
    return {
      imgArr:[
        "自己得图片路径/2.png",
        "自己得图片路径/1.png",
      ],

    };
  },

  //方法集合
  methods: {
      //改变图片
      one(){
        var msg=document.getElementById("pic");
        //切换到另一个图片
        msg.src="自己得图片路径/1.png";
      },

      //
      two(){
        var msg=document.getElementById("pic");
        //切换到另一个图片
        msg.src="自己得图片路径/2.png";

      }

   },


}
</script>

<style scoped>

</style>