Vue.js04：vue样式-通过属性绑定方式为元素设置class类样式
- <!-- 传统写法 -->
<h1 class="red thin">这是一个h1标签</h1>
- <!-- 第一种使用方式，直接传递一个数组 -->
<h1 :class="['red', 'italic']">这是第二个h1标签</h1>
- <!-- 在这里可以使用三元表达式 -->
<h1 :class="['red', 'italic', flag?'active':'']">这是第三个h1标签</h1>
- <!-- 简化写法 在数组中使用对象来代替三元表达式 -->
<h1 :class="['red','italic',{'active':flag}]">这是第四个h1标签</h1>
- <!-- 直接使用对象 -->
<h1 :class="{red:true, italic:false, thin:true, active:flag}">来来来，大战一场</h1>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 引入 vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .red{ color:red; } .thin{ font-weight: 200; } .italic{ font-style: italic; } .active{ letter-spacing: 0.5em; } </style> </head> <body> <div id="app"> <!-- 传统写法 --> <h1 class="red thin">这是一个h1标签</h1> <!-- 第一种使用方式，直接传递一个数组 --> <h1 :class="['red', 'italic']">这是第二个h1标签</h1> <!-- 在这里可以使用三元表达式 --> <h1 :class="['red', 'italic', flag?'active':'']">这是第三个h1标签</h1> <!-- 简化写法 在数组中使用对象来代替三元表达式 --> <h1 :class="['red','italic',{'active':flag}]">这是第四个h1标签</h1> <!-- 直接使用对象 --> <h1 :class="{red:true, italic:false, thin:true, active:flag}">来来来，大战一场</h1> </div> <div id="article"> <p class="green thin">我的段落1</p> <p :class="{red:true, active: pres}">我的段落2</p> </div> </body> <script> // 实例化vue对象 let vm1 = new Vue({ // 绑定对象 el: '#app', data: { flag: true }, methods: { } }) let vm2 = new Vue({ el: '#article', data: { pres: false } }) </script> </html>
