Vue——07——使用样式class

    技术2022-07-11  96

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../lib/vue.js"></script> <style> .red { color: blueviolet; } .thin { font-weight: 200; } .ilalic { font-style: italic; } active { letter-spacing: 0.5em; } </style> </head> <body> <!-- 不写引号,会从vm里面去找--> <div id="app"> <!-- 1.css普通写法 --> <!-- <h1 class="active red">{{msg}}</h1> --> <!--2.直接传递一个数组,这里的class需要使用v-Bind做数据绑定 里面要写引号,不然会把它当做一个变量在vm里面去找 --> <!-- <h1 v-bind:class="['active','red']">{{msg}}</h1> --> <!-- 3.在数组中使用三元表达式(麻烦) --> <!-- <h1 v-bind:class="['active','red',flag?'thin':'']">这是一个标签</h1> --> <!-- 4.在数组中使用对象的形式代替三元表达式 --> <!-- <h1 v-bind:class="['active','red',{'thin':flag}]">这是一个标签</h1> --> <!-- 5.直接使用对象 对象的属性的类名,由于对象的属性可带引号也可不带,所以这里没写引号,属性的值是一个标识符 --> <!-- <h1 v-bind:class="{red:true,thin:true,ilalic:false}">这是一个标签</h1> --> <h1 v-bind:class="classObj">这是一个标签</h1> </div> <script> var vm = new Vue({ el: "#app", data: { // msg:"我是一个标签", flag: true, classObj:{red:true,thin:true,ilalic:false} }, methods: { } }) </script> </body> </html>
    Processed: 0.011, SQL: 9