Vue动态样式:class用法

2022年6月26日10:15:36

我们在做页面的时候，经常会用到动态样式，比如有3个按钮，选中了一个，选中那个样式变化，再选另一个，选的那一个样式变化，第一个又变成初始的样式，这个就叫做动态样式，一般用:class来实现。
Vue动态样式:class用法
Vue动态样式:class用法

1、首先定义一个变量；
Vue动态样式:class用法

2、写动态的class，
&.activity{}
Vue动态样式:class用法
Vue动态样式:class用法

3、在点击事假中；
Vue动态样式:class用法
整个文件如下：

<template><div><h1>动态样式</h1><spanclass="money":class="{activity: value ==='A'}"@click="toA">10元</span><spanclass="money":class="{activity: value ==='B'}"@click="toB">50元</span><spanclass="money":class="{activity: value ==='C'}"@click="toC">100元</span></div></template><script>exportdefault{
  name:"Class",data(){return{
      value:"",//变量};},
  methods:{toA(){this.value="A";},toB(){this.value="B";},toC(){this.value="C";},},};</script><stylelang="scss"scoped>.money{font-size: 18px;margin: 10px;border: 1px solid #000000;padding: 10px;cursor: pointer;
  &.activity{background: pink;color: #ffffff;}}</style>
  • 作者：江湖儿女快意恩仇，我是没有感情的小秃头
  • 原文链接：https://blog.csdn.net/Sunshine__Girl/article/details/109258928
    更新时间：2022年6月26日10:15:36 ，共 724 字。