在Vue.js 3.x中,动态的样式类在v-on:class中定义,静态的类名写在class样式中。
Vue中提供了使用数组绑定样式,可以直接在数组中写上样式的类名。
如果不使用单引号包裹类名,其实代表的还是一个变量的名称,会出现错误信息。
【例3.10】 class数组语法(源代码\ch03\3.10.html)。
在Chrome浏览器中运行程序,打开控制台,可以看到渲染的样式,如图3-12所示。
图3-12 数组语法渲染结果
如果想要以变量的方式定义样式,就需要先定义这个变量。示例中的样式与上例样式相同。
在数组语法中,还可以使用对象语法,根据值的真假来控制样式是否使用。
在Chrome浏览器中运行程序,渲染结果和上面的示例相同(见图3-12)。
前面提到过,在数组中可以使用对象的形式来设置样式,在Vue中也可以直接使用对象的形式来设置样式。对象的属性为样式的类名,value则为true或者false,当值为true时显示样式。由于对象的属性可以带引号,也可以不带引号,所以属性就按照自己的习惯写法就可以了。
【例3.11】 Class对象语法(源代码\ch03\3.11.html)。
在Chrome浏览器中运行程序,打开控制台,可以看到渲染的结果,如图3-13所示。
当class1或class2变化时,class列表将相应地更新。例如,class2的值变更为false,代码如下。
【例3.12】 class2的值变更为false(源代码\ch03\3.12.html)。
在Chrome浏览器中运行程序,打开控制台,可以看到渲染的结果,如图3-14所示。
图3-13 Class对象语法
图3-14 渲染结果
当对象中的属性过多时,如果还是全部写到元素上,势必会显得比较烦琐。这时可以在元素上只写对象变量,在Vue.js实例中进行定义。
【例3.13】 在元素上只写对象变量(源代码\ch03\3.13.html)。
在Chrome浏览器中运行程序,渲染的结果如图3-15所示。
图3-15 对象语法效果
也可以绑定一个返回对象的计算属性,这是一个常用且强大的模式,示例代码如下:
在Chrome浏览器中运行程序,渲染的结果和上面示例相同(见图3-15)。
当在一个自定义组件上使用class属性时,这些类将被添加到该组件的根元素上,这个元素上已经存在的类不会被覆盖。
例如,声明组件my-component如下:
Vue.component('my-component', { template: '<p class="class1 class2">Hello</p>' })
然后在使用它的时候添加一些class样式style3和style4:
<my-component class=" class3 class4"></my-component>
HTML将被渲染为:
<p class=" class1 class2 class3 class4">Hello</p>
对于带数据绑定的class也同样适用:
<my-component v-bind:class="{ class5: isActive }"></my-component>
当isActive为Truthy时,HTML将被渲染为:
<p class=" class1 class2 class5">Hello</p>
在JavaScript中,Truthy(真值)指的是在布尔值上下文中转换后的值为真的值。所有值都是真值,除非它们被定义为falsy(即除false、0、" "、null、undefined和NaN外)。