vue---点击切换不同的图片

最新推荐文章于 2025-02-19 11:13:42 发布

Beauty_Ida

最新推荐文章于 2025-02-19 11:13:42 发布

阅读量8.9k

点赞数 6

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/XQXOI/article/details/103782175

版权

本文介绍了一个使用Vue.js实现的点击切换不同布局的功能。通过点击事件，可以在一栏式和两栏式布局间切换，展示了Vue的数据绑定和条件渲染特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue—点击切换不同的图片

点击前

点击前
点击后：
在这里插入图片描述
可以来回切换-----
html：

<!--布局排列-->
     <div class="layOut" @click="layOut">
        <img v-if="lay_type" src="@img/image/olayout.png" alt />
        <img v-else src="@img/image/twlayout.png" alt />
     </div>

js:

export default {
  name: "sortstick",
  data(){
    return{
    // 0：默认布局为一栏式
    // 1：两栏式
        lay_type:0, 
    }
  },
  methods:{
/***
 *  排列布局按钮
 * 在父容器上设置点击按钮,
 * 然后进行判断，
 * 如果值（this.lay_type == 0）相等，
 * 就为false(或者等于另外的值,例如：this.lay_type = 1)，
 * 反之，值不等就为true;(或者等于原值,例如：this.lay_type = 0)
 */
    layOut(){
      if(this.lay_type == 0){
        this.lay_type = 1
      }else{
         this.lay_type = 0
      }
    }
  } 
}
</script>