Vue样式单个对象

Vue样式单个对象教程

Vue 样式 可以使用 class 来指定,且 class 里面可以是一个对象的形式。Vue 样式使用一个对象的语法格式为 :class="{style1:flag1, style2:flag2}"。Vue样式使用一个对象形式的时候,样式可以不使用单引号。

案例

Vue样式单个对象

<!DOCTYPE html> <html> <head> <title>Vue 样式单个对象</title> <script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script> <style> .red{ color: red; } .italic{ font-style: italic; } .active{ letter-spacing: 0.5em; } </style> </head> <body> <div id="app"> <h1 :class="{red:true, italic:false, active:true}">HaiCoder</h1> <p>嗨客网(www.haicoder.net)</p> </div> </body> <script> var v1 = new Vue({ el:"#app", data:{ flag:true } }) </script> </html>

浏览器运行效果如下图所示:

33 vue style class.png

我们看到,h1 标签只被指定了 red 和 active 两个样式。

Vue样式单个对象总结

Vue 样式可以使用 class 来指定,且 class 里面可以是一个对象的形式。Vue 样式使用一个对象的语法格式为 :class="{style1:flag1, style2:flag2}"