05Vue入门教程Vue动态样式绑定

　　1。简介
　　本小节我们将介绍Vue中如何动态绑定样式。包括Class的绑定、内联样式Style的绑定。掌握样式绑定的多种形式是其中的重点难点。同学们可以在学完本小节之后对样式的绑定方式加以总结，再通过反复的练习来加深印象。2。木子解释
　　操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用vbind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将vbind用于class和style时，Vue。js做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。官方定义
　　通过vbind指令给DOM元素动态绑定Class和Style，一般用于根据不同数据状态切换元素样式的场景下。2。绑定元素的Class
　　我们可以通过数组和对象的两种形式绑定元素的Class。2。1对象2。1。1对象语法
　　通过传给vbind：class一个对象，以动态地切换class：
　　代码解释：上面的语法表示show这个class存在与否将取决于数据属性isShow是否为真值。
　　具体示例：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadstyle。hide｛display：｝stylebodyHello！bodyhtml
　　运行案例可查看在线运行效果
　　代码解释：HTML代码第2行，我们给p绑定样式，当isHide为真值时，其渲染结果为，否则。打开控制台，修改vm。isHide的值可以动态改变页面效果。2。1。2与普通的class属性共存
　　此外，vbind：class指令也可以与普通的class属性共存。语法：
　　当有如下模板：
　　和如下data：data：｛isShow：true，hasError：false｝
　　结果渲染为：
　　代码解释：当isShow或者hasError变化时，class列表将相应地更新。
　　例如，如果hasError的值为true，isShow的值为true，class列表将变为defaultClassshowtextdanger。
　　例如，如果hasError的值为true，isShow的值为false，class列表将变为defaultClasstextdanger。
　　在之前介绍的案例中，我们将绑定的数据对象内联定义在模板里，这样显得比较繁琐。其实，我们可以统一定义在一个classObject中：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbodyHello！bodyhtml
　　运行案例可查看在线运行效果
　　结果渲染为：代码块1
　　代码解释：HTML代码中，我们首先给p一个固定样式defaultClass，然后通过classObject给p绑定样式。JS代码第69行，我们定义了数据classObject，它有两个属性：1。属性show，值为true，2。属性textdanger，值为false。所以，最后页面渲染的效果是：2。1。3利用计算属性绑定样式
　　我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbodybodyhtml
　　运行案例可查看在线运行效果
　　结果渲染为：
　　代码解释：HTML代码中，我们通过classObject给p绑定样式。JS代码第611行，我们定义了计算属性classObject，它返回一个对象，该对象有两个属性：1。属性show，值为true，2。属性textdanger，值为false。所以，最后页面渲染的效果是：2。2数组语法
　　我们可以把一个数组传给vbind：class，以应用一个class列表：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbodyHello！bodyhtml
　　运行案例点击运行案例可查看在线运行效果
　　渲染为：
　　代码解释：在HTML代码中，我们通过数组给p绑定样式，数组中有classA和classB两个值。在JS代码第67行定义了classA和classB两个字符串，它的格式和元素class的格式相同，不同的样式类之间以空格相隔。
　　如果你也想根据条件切换列表中的class，可以用三元表达式：
　　这样写将始终添加classB的样式，但是只有在isShow为真时才添加showClass。
　　不过，当有多个条件class时这样写有些繁琐。所以在数组语法中也可以使用对象的形式来表达数组中的某一项：
　　代码解释：在HTML中，p绑定一个样式数组，数组第一项是一个对象表达式｛showClass：isShow｝。当isShow为true时样式最终绑定为：；当isShow为false时样式最终绑定为：；3。绑定内联样式
　　和Class的绑定一样，Style的绑定同样可以通过数组和对象的两种形式。3。1对象语法
　　vbind：style的对象语法十分直观看着非常像CSS，但其实是一个JavaScript对象。CSS属性名可以用驼峰式（camelCase）或短横线分隔（kebabcase，记得用引号括起来）来命名：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbodybodyhtml
　　运行案例可查看在线运行效果
　　渲染为：
　　代码解释：在HTML代码中，我们给p绑定backgroundcolor和width两个内联样式，它们的值在data中定义。
　　在模板中写较为复杂的表达式语法显得比较繁琐，通常直接绑定到一个样式对象更好，这会让模板显得更加清晰：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbodybodyhtml
　　运行案例可查看在线运行效果
　　渲染为：代码块1
　　代码解释：在HTML代码中，我们给p绑定数据styleObject，它们的值在data中定义。3。2数组语法
　　vbind：style的数组语法可以将多个样式对象应用到同一个元素上：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbodybodyhtml
　　运行案例可查看在线运行效果
　　渲染为：4。小结
　　本小节我们学习了如何通过vbind来动态绑定样式。主要有以下知识点：通过vbind：class动态绑定元素的Cvbind：style动态绑定元素的内联样式；如果通过数组和对象的形式给vbind：class和vbind：style赋值。