vue_cli如何多个样式绑定(动态切换样式)

 时间:2024-10-20 06:46:24

1、首先使用HBuilder X创建一个vue-cli项项目,一个空白项目

vue_cli如何多个样式绑定(动态切换样式)

2、在style中写入两个样式,一个长和宽都为100px底色为为绿色,另一个底色为为红色,两个样式都加载排在后面的会覆盖前面的相同项。

vue_cli如何多个样式绑定(动态切换样式)

3、在显示内容里一个对象v-bind:class ,以动态地切换 class,两个变量为isActive和text-danger。在添加一个class赋值为static

vue_cli如何多个样式绑定(动态切换样式)

4、在data中添加参数isActive和hasError,都赋值为true

vue_cli如何多个样式绑定(动态切换样式)

5、样式为100*100的红色方框,按F12查看class的值为staticactive text-danger,说明v-bind:class指令也可以与普通的 class attribute 共存

vue_cli如何多个样式绑定(动态切换样式)vue_cli如何多个样式绑定(动态切换样式)

6、把hasError赋值为false

vue_cli如何多个样式绑定(动态切换样式)

7、样式为100*100的绿色方框

vue_cli如何多个样式绑定(动态切换样式)vue_cli如何多个样式绑定(动态切换样式)
  • 当当云阅读怎么批量清空足迹?
  • 剑气长1.9正式版隐藏密码攻略 隐藏英雄密码攻略
  • 易语言写股票插件教程
  • 如何进入魔兽世界怀旧服论坛?
  • 剑网3怀旧服怎样做绕场一周任务
  • 热门搜索
    我爱我校手抄报内容 关于植物的手抄报 写规范字手抄报内容 感恩的心手抄报内容 三年级感恩手抄报 爱牙护齿手抄报 预防传染病手抄报资料 热爱祖国手抄报图片 我让妈妈露笑脸手抄报 节约粮食手抄报内容