01.Vue中通过点击div更改背景颜色(本人新手，记录学习过程)

最新推荐文章于 2024-06-20 15:55:41 发布

髮未染霜

最新推荐文章于 2024-06-20 15:55:41 发布

阅读量7.7k

点赞数 3

分类专栏： Vue学习过程文章标签： vue

本文链接：https://blog.csdn.net/Aiydairuning/article/details/117398138

版权

这篇博客记录了Vue新手在学习过程中，如何通过v-bind:class和v-bind:style指令实现点击div改变背景颜色的功能。作者提到了使用v-bind:class时遇到的问题，即再次点击已选div无法恢复初始颜色。同时，通过v-bind:style虽然能实现颜色切换，但会导致之前被点击的div颜色不变。最后，作者分享了解决这个问题的方法，即调整v-bind:style中的代码。

摘要由CSDN通过智能技术生成

通过v-bind:class={‘类名’ : ‘返回一个bool值’} 实现（待完善：当再次点击已被选择的div时，未返回初始颜色）

<div id="app">
  <div :class="{active : currentIndex == index}"
       v-for="(item,index) in info"
       @click="divCLick(index)">{
   {
   item}}
  </div>
</div>

<script>
  /**
   *  设置currentIndex=0  获取当前点击的div下标值
   *    ①：currentIndex = 0时，
   *        :class="{active : currentIndex （0） == index （0）}  返回true，第一个默认显示背景颜色
   *       而其他两个div:
   *        :class="{active : currentIndex (1) == index (0)}  返回false，没有应用css样式
   *        :class="{active : currentIndex (2) == index (0)}  同上
   * */
  const vm = new Vue({
   
    el: "#app",
    data: {
   
      currentIndex :

最低0.47元/天解锁文章

髮未染霜

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
01.Vue中通过点击div更改背景颜色(本人新手，记录学习过程)

01.Vue中通过点击div更改背景颜色(本人新手，记录学习过程)通过v-bind:class 实现<div id="app"> <div :class="{active : currentIndex == index}" v-for="(item,index) in info" @click="divCLick(index)">{{item}} </div></div><script> /**
复制链接

扫一扫

专栏目录