内联样式（style）绑定的简单应用——按钮切换

最新推荐文章于 2024-05-20 15:17:08 发布

VIP文章 lwq_qqq

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量524

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/m0_48180834/article/details/119827930

版权

这里有三个按钮，通过点击一个按钮改变其背景颜色和字体颜色，另外两个按钮样式不变，同理其他两个按钮在点击时也一样，实现按钮切换效果。

首先这里使用的是vue中的内联式绑定，思路是：

1.设置一个数据来进行判断，其初始值设为空字符串，就会显示原始样式

      data: {

        isActive: '',

      }

2.接着在数据模型中设置经点击后要变换的样式，这里生声明一个对象，用在按钮的绑定上

     data: {

        isActive: '',

        acStyle: {

          background: 'black',

          color: 'white'

        }

       },

3.接着就是进行style绑定，这里是表达式结果类型为字符串，为展示点击按钮改变样式，使用的是三目运算，在第一步中设置了一个可用于判断的数据，如果该数据值和按钮内容一样的话，则会触发点击事件，该style样式设置为要改变的样式，即上面设置的acStyle样

关注