背景
当我们需要操作元素的 class 列表时，我们可以使用 v-bind 实现，但是直接计算整体字符显得很笨，针对这个问题，Vue 做了专门的加强，我们可以通过 v-bind:class 对 class 实现动态绑定。
实践
作用于对象(模板内联)
效果：我们可以通过操作 Vue 的 attribute 来实现对 class 的更改。
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <title>Document</title> <style type="text/css"> .red {background-color: red} .bb {height: 400px;} .normal {width: 400px;} </style> </head> <body> <div id="vpp" class='normal' v-bind:class="{red:isred,bb:isbb}"> <p>msg</p> </div> <script> app = new Vue({ el: "#vpp", data: { isred: true, isbb: false } }) </script> </body> </html> 复制代码
页面效果
网络异常，图片无法展示
|
网络异常，图片无法展示
|
网络异常，图片无法展示
|
Tip
实际上，class 的动态绑定是通过 Vue data 属性的 truthiness（是否为真）来控制的。如果为真则加载 class，如果为假则不加载。
如上，当 isbb 为 true 时，isbb 对象的 key==>bb 样式才会加载。
默认样式为
div宽400px；背景颜色为红色。当我们修改isbb属性值后，div的高度也变为400px；
作用于对象(非模板内联)
上面的class是在模板语法内条件使能的，如果你觉得麻烦，也可以选择一下这种更直接的方法，即模板中定义对象的整体，Vue的data中定义对象的具体内容。
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <title>Document</title> <style type="text/css"> .red {background-color: red} .bb {height: 400px;} .normal {width: 400px;} </style> </head> <body> <div id="vpp" class='normal' v-bind:class="clsObj"> <p>msg</p> </div> <script> app = new Vue({ el: "#vpp", data: { isred: true, isbb: false, clsObj: { red: true, bb: false } } }) </script> </body> </html> 复制代码
页面效果
和上面的一样
网络异常，图片无法展示
|
以上就是今天的全部内容了，感谢您的阅读，我们下节再会。
