Vue 动态绑定CSS样式

来源:简书 分类: 文章浏览史 发布时间:2020-08-16 19:42:08 最后更新:2020-08-16 浏览:142
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-08-16 19:42:08

一.示例1

  1. 首先准备一些css样式,在这个示例中我们将展示通过点击动态修改颜色。
  2. vue对象中有两个数据,changeColor和changeLength值都为false。
  3. 回到html文档中,在div中绑定属性,v-bind:class="{}"一个对象,changetheColor : changeColor。由于此时changeColor在vue中的值为false,所以changetheColor此时为无效属性。
  4. 添加点击事件@click,changeColor = !changeColor,点击使得changeColor的值从false变为true。



二. 示例2

  1. 在这里,我们给div绑定的属性class="compClasses",是以computed计算属性传进来的对象,此时由于changeColor和changeLength值都为false,所以changetheColor和changetheLength都是无效属性。
  2. 同样,创建两个button,每个button都添加点击事件,changeColor = !changeColor,changeLength = !changeLength。点击使得changeColor,changeLength的值从false变为true。
  3. 即可实现点击按钮,动态变换css样式



php技术微信