05-Vue基础之Class 与 Style 绑定

个人名片:
作者简介:一名大二在校生
个人主页:坠入暮云间x
座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。
**学习目标: 坚持每一次的学习打卡

文章目录

    • 动态绑定 HTML Class
      • 1.对象语法
      • 2.数组语法
    • 绑定内联样式——style
      • 1.对象语法
      • 2.数组语法

上次我们对vue的计算属性和监视属性,有了初步了解,这次我们学习vue的样式绑定属性,vue.js中常用v-bind动态绑定属性,这次我从对象语法和数组语法下分别介绍该如何使用他们,让我们一起看下去吧!

动态绑定 HTML Class

1.对象语法

语法:给v-bind:class传一个对象,再动态的切换class
用法:

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
>div>
<javascript type="text/css">
data: {
  isActive: true,
  hasError: false
}
javascript>

isActive 或者 hasError 变化时,class 列表将相应地更新。例如,如果 hasError 的值为 true,class 列表将变为 “static active text-danger”。
active:data中的isActive是否为ture,若为ture将会显示,false则会隐藏

2.数组语法

语法:将数组传给v-bind:class,应用一个class列表
用法:

绑定内联样式——style

1.对象语法

语法:v-bind:style 后面跟一个对象,常用{}
用法:

data: {
  activeColor: 'red',
  fontSize: 30
}
   

2.数组语法

语法:v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上:
用法:

以上是我对该知识点的总结,有什么不对的地方欢迎大家指出,互相学习,进步

你可能感兴趣的:(vue3,vue.js,前端,javascript)