<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                [TOC] >[success] # 樣式綁定語法 記下來講 **2種** 綁定樣式的方法,**動態class** 以及 **動態style** 。 >[success] ## class綁定 在 **vue** 中有以下幾種方式來 **動態綁定class**: 1. **字符串形式** : **通過字符串來控制樣式的顯示** 2. **對象形式** :**通過對象來控制樣式的顯示** 3. **數組形式** :**通過數組來控制樣式的顯示** 4. **組件上綁定class** :**通過 $attrs 來繼承父組件樣式** >[success] ### 字符串形式 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>樣式綁定語法</title> <style> .red{ color: red; } .green{ color: green; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ classString: 'red' } }, template: ` <div :class="classString">hello world</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 然后在 **f12控制臺** 輸入 ~~~ vm.classString = 'green' ~~~ **文字就會變成綠色** 。 >[success] ### 對象形式 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>樣式綁定語法</title> <style> .red{ color: red; } .green{ color: green; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ classObject: {red:false, green:true} } }, template: ` <div :class="classObject">hello world</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ### 數組形式 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>樣式綁定語法</title> <style> .red{ color: red; } .green{ color: green; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ classArray: ['red','green', { brown: true }] } }, template: ` <div :class="classArray">hello world</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ### 組件上綁定class **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>樣式綁定語法</title> <style> .red{ color: red; } .green{ color: green; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ classString: 'red', classObject: {red:false, green:true}, classArray: ['red','green', { brown: true }] } }, template: ` <div :class="classString"> hello world <demo class="green"/> </div> ` }) app.component('demo', { template: ` <div class="green">one</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 如果 **子組件中的template子級只有一個元素** ,可以在 **父組件中子組件標簽上添加class** 改變 **子組件樣式** ,**子組件template子級有多個元素** ,**vue** 會不知道到底是把 **green** 加到 **第一個節點** ,還是 **第二個節點** ,這種情況可以 **直接在子組件標簽身上添加class樣式** ,如下: ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>樣式綁定語法</title> <style> .red{ color: red; } .green{ color: green; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ classString: 'red', classObject: {red:false, green:true}, classArray: ['red','green', { brown: true }] } }, template: ` <div :class="classString"> hello world <demo/> </div> ` }) app.component('demo', { template: ` <div class="green">one</div> <div class="green">two</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 再或者可以使用 **$attrs**,如下代碼,這樣的寫法是什么意思呢,意思:**子組件使用父組件屬性上的class的值(子組件繼承父組件樣式)** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>樣式綁定語法</title> <style> .red{ color: red; } .green{ color: green; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ classString: 'red', classObject: {red:false, green:true}, classArray: ['red','green', { brown: true }] } }, template: ` <div :class="classString"> hello world <demo class="green"/> </div> ` }) app.component('demo', { template: ` <div :class="$attrs.class">one</div> <div :class="$attrs.class">two</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## style綁定 在 **vue** 中有以下幾種方式來 **動態綁定style**: 1. **字符串形式**:**通過字符串來控制樣式的顯示** 2. **對象形式**:**通過對象形式來控制樣式的顯示** >[success] ### 字符串形式 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>樣式綁定語法</title> <style> .red{ color: red; } .green{ color: green; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ styleString: 'color:yellow' } }, template: ` <div :style="styleString">hello world</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ### 對象形式 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>樣式綁定語法</title> <style> .red{ color: red; } .green{ color: green; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ styleObject: { color: 'orange', background: 'yellow' } } }, template: ` <div :style="styleObject">hello world</div> ` }) const vm = app.mount('#root') </script> </html> ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看