本文介绍了Vue的Class与Style绑定,分享给大家,具体如下:
绑定 HTML Class
对象语法
我们可以传给 v-bind:class 一个对象,以动态地切换 class:
rush:js;">
如上,我们先给 .exp 一个边框,我们利用 v-bind 方法传入一个新的 class 属性 .newExp,设置一个蓝色的背景颜色。当我们在控制台修改 .newExp 的属性为 true 时,会给 div 添加一个蓝色的背景颜色。
我们也可以传入更多的属性来切换多个 class 。
rush:js;">
在模板里的渲染结果为:
rush:xhtml;">
rush:js;">
渲染结果和上面的一样
数组语法
我们可以把一个数组传给 v-bind:class,以应用一个 class 列表:
rush:js;">
渲染为:
rush:xhtml;">
要切换class,使用三元运算符:
rush:js;">
使用对象语法的话,会看起来更加清晰
相关文章
可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
<el-form-item label="入库类型" ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...