CSS动态样式---基础-控制是否添加CSS类

功能：三个背景框，点击按钮添加CSS属性，再次点击去除CSS属性。

创新互联公司是一家专业提供彰武企业网站建设,专注与成都网站设计、成都做网站、H5技术、小程序制作等业务。10年已为彰武众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

比如，我想实现只有点击这个元素时才添加这个red类，再次点击时移除red类，为了实现这个功能，需要在Vue实例内添加data属性，以便和模板代码建立联系。attachRed默认false，即默认不添加，点击方框时，需要对attachRed取反，为了按照指定条件添加CSS类，需要用 :class绑定到class属性，即时已经添加了demo这个class属性也无妨，这里的“：class”用的是Vue语法，不再使用HTML元素本身的class属性，它确实是与class属性绑定，而Vue在背后把这些语句合并为一个class对象，所i这里需要传入一个JavaScript对象，着就是Vue要获取的参数，在这个对象里，键应该是下要添加的CSS类名，值用来控制是否添加CSS类，应该是true或者false，在这里我要添加CSS类red，直接写red即可，也可以带上单引号，如果类中包含特殊字符，就必须带上单引号。然后查看效果，点击方框时，背景在红灰之间切换。这一行代码把CSS类red作为键名，引用这里的CSS代码，然后与attachRed联系到一起，鼠标点击可以让attachRed不断在true和false之间切换。