vue_v-bind指令绑定class和style

vue_v-bind指令绑定class和style

v-bind指令的本质是: 动态更新html元素上的属性值。

关于css样式调用:

在HTML中我们可以使用class和id来选择调用css样式属性。
class在css中被称为“类”,在css样式中以小写的点,“.”来命名,如: .css5{属性:属性值},而在html页面里则以class="css5"来选择调用,命名好的css又叫css选择器。

我们知道一个html元素如:div、span, button等这些标签元素,都可以设置一些属性值,其中id是元素的名称,可以供js或其它脚本程序来访问该元素对象。
class 属性规定元素的类名(classname)。class 属性大多数时候用于指向样式表中的类(class)。

即: 在class属性中我们可以给一个html元素定义样式。

vue绑定class的几种方式


DOM元素经常会动态地绑定一些class类名或style样式,我们可以使用v-bind指令来绑定class和style。

v-bind绑定class的几种语法:

1.传递一个对象

2.传递一个数组

传递一个对象

我们可以传递给v-bind:class一个对象作为参数,以动态地切换class。这个对象中,可以有多个class,而每个class存在与否将取决于数据属性isActive的truthiness。 : class 内的表达式每项为真时,对应的类名就会加载。

示例代码




    
    Title
    



  
钢七连

运行结果:

vue_v-bind指令绑定class和style_第1张图片
v-bind绑定class

你可能感兴趣的:(vue_v-bind指令绑定class和style)