Css动态切换内容和动态切换div盒子背景图片

此文为记录文章防止忘记!

图片[1]-Css动态切换内容和动态切换div盒子背景图片

此为静态页面:

点击按钮内容切换且未选中图片变为黑色选中文字需要变亮。

@mouseover="slide(1)"
@mouseover="slide(2)"

两个按钮都添加了鼠标移入事件,其实也可以添加click事件。此次想做的鼠标移入事件!

        <div class="introduce"
             :style="isActive!==1? 'backgroundImage:' +'url('+ coverImgUrl +')' :''"
        >
          <h1 :style="isActive == 1 ? 'color:#fff' : ''" @mouseover="slide(1)">角色介绍</h1>
        </div>
        <div class="gameplay"
             :style="isActive!==2? 'backgroundImage:' +'url('+ coverImgUrl +')' :''"
        >
          <h1 :style="isActive== 2 ? 'color:#fff' : ''" @mouseover="slide(2)">游戏玩法</h1>
        </div>
      </div>

在data中定义了一个变量判断,另一个是图片

  data() {
    return {
      isActive: 1,
      coverImgUrl: require('../assets/material/没激活状态.png')
    }
  },

在methods设置方法将刚才的slide的值赋值给isActive就完成了,

如此鼠标移入就会得到正确的展示!

内容区域就用 v-if v-else这样判断!或者v-if=isActive==2展示内容2区域的内容!

图片[2]-Css动态切换内容和动态切换div盒子背景图片

© 版权声明
THE END
喜欢就支持一下吧
点赞12 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容