標籤：font 展示 var 圖片 use ret inf 合并 document
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 .add-bg {10 background: cyan;11 }12 .add-color {13 color: #fff;14 }15 .add-fontsize {16 font-size: 18px;17 }18 </style>19 <!-- vue.js 引入 -->20 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>21 </head>22 <body>23 <div id="app">24 <!-- 1、 -->25 <div class="add-fontsize" :class="{‘add-bg‘: isActive, ‘add-color‘: addColor}">bind class</div>26 <!-- 雖然說是寫了三個class，並且還分成了兩類，但是Vue會很智能的將這兩類合并為我們想要的效果 -->27 28 29 <!-- 2、 -->30 <!-- 或使用三元的方式去操控class -->31 <div :class="[addColor ? ‘add-color‘ : ‘add-bg‘, ‘add-fontsize‘]">use 三元</div>32 <!-- 這裡的add-fontsize始終都有 -->33 34 35 <!-- 3、 -->36 <!-- 使用對象的方式去操控class -->37 <div :class="[{‘add-bg‘: isActive}, ‘add-fontsize‘]">use object</div>38 <!-- 這裡的add-fontsize始終都有 -->39 <!-- 當對象中的class屬性是單獨的一串字元，沒有其它橫杠、底線等特殊符號時，可省略掉單引號 -->40 </div>41 42 <script>43 var app = new Vue({44 el: ‘#app‘,45 data () {46 return {47 isActive: false, // 改為true時就會展示對應的背景色48 addColor: false // 改為true時就會展示字型對應的顏色49 }50 }51 })52 </script>53 </body>54 </html>
結果如下：
Vue綁定class
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
