整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          05《Vue 入門教程》Vue 動態樣式綁定

          05《Vue 入門教程》Vue 動態樣式綁定

          . 簡介

          本小節我們將介紹 Vue 中如何動態綁定樣式。包括 Class 的綁定、內聯樣式 Style 的綁定。掌握樣式綁定的多種形式是其中的重點難點。同學們可以在學完本小節之后對樣式的綁定方式加以總結,再通過反復的練習來加深印象。

          2. 木子解釋

          操作元素的 class 列表和內聯樣式是數據綁定的一個常見需求。因為它們都是屬性,所以我們可以用 v-bind 處理它們:只需要通過表達式計算出字符串結果即可。不過,字符串拼接麻煩且易錯。因此,在將 v-bind 用于 class 和 style 時,Vue.js 做了專門的增強。表達式結果的類型除了字符串之外,還可以是對象或數組。 ---- 官方定義

          通過 v-bind 指令給 DOM 元素動態綁定 Class 和 Style,一般用于根據不同數據狀態切換元素樣式的場景下。

          2.綁定元素的 Class

          我們可以通過數組和對象的兩種形式綁定元素的 Class。

          2.1 對象

          2.1.1 對象語法

          通過傳給 v-bind:class 一個對象,以動態地切換 class:

          <div v-bind:class="{ show: isShow }"></div>
          

          代碼解釋: 上面的語法表示 show 這個 class 存在與否將取決于數據屬性 isShow 是否為真值。

          具體示例:

          實例演示

          <!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>
          </head>
          <style>
            .hide {
              display: none;
            }
          </style>
          <body>
            <div id="app"> 
              <div v-bind:class="{hide: isHide}">Hello !</div>
            </div>
          </body>
          <script src="https://unpkg.com/vue/dist/vue.js"></script>
          <script>
           var vm=new Vue({
              el: '#app',
            data: {
              isHide: true
            },
          })
          //vm.isHide=true
          </script>
          </html>
          
          

          "運行案例" 可查看在線運行效果

          代碼解釋: HTML 代碼第 2 行,我們給 div 綁定樣式,當 isHide 為真值時, 其渲染結果為 <div class="hide"></div>,否則 <div></div>。 打開控制臺,修改 vm.isHide 的值可以動態改變頁面效果。

          2.1.2 與普通的 class 屬性共存

          此外,v-bind:class 指令也可以與普通的 class 屬性共存。 語法:<div class="defaultClass" v-bind:class="{ classA: isA,classB:isB }">

          當有如下模板:

          <div
            class="defaultClass"
            v-bind:class="{ show: isShow, 'text-danger': hasError }"
          ></div>
          

          和如下 data:

          data: {
            isShow: true,
            hasError: false
          }
          

          結果渲染為:

          <div class="defaultClass active"></div>
          

          代碼解釋:isShow 或者 hasError 變化時,class 列表將相應地更新。

          例如,如果 hasError 的值為 trueisShow 的值為 true,class 列表將變為 "defaultClass show text-danger"。

          例如,如果 hasError 的值為 true,isShow 的值為 false,class 列表將變為 "defaultClass text-danger"。

          在之前介紹的案例中,我們將綁定的數據對象內聯定義在模板里, 這樣顯得比較繁瑣。其實,我們可以統一定義在一個 classObject 中:

          實例演示

          <!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>
          </head>
          <body>
            <div id="app"> 
              <div class="defaultClass" v-bind:class="classObject">Hello !</div>
            </div>
          </body>
          <script src="https://unpkg.com/vue/dist/vue.js"></script>
          <script>
           var vm=new Vue({
              el: '#app',
            data: {
              classObject: {
                show: true,
                'text-danger': false
              }
            },
          })
          </script>
          </html>
          
          

          "運行案例" 可查看在線運行效果

          結果渲染為:

          <div class="defaultClass show"></div>
          代碼塊1

          代碼解釋: HTML 代碼中,我們首先給 div 一個固定樣式 defaultClass, 然后通過 classObject 給 div 綁定樣式。 JS 代碼 第 6-9 行,我們定義了數據 classObject,它有兩個屬性:1. 屬性 show,值為 true,2. 屬性 text-danger,值為 false。所以,最后頁面渲染的效果是:<div class="defaultClass show"></div>

          2.1.3 利用計算屬性綁定樣式

          <div v-bind:class="classObject"></div>
          

          我們也可以在這里綁定一個返回對象的計算屬性。這是一個常用且強大的模式:

          實例演示

          <!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>
          </head>
          <body>
            <div id="app"> 
              <div v-bind:class="classObject"></div>
            </div>
          </body>
          <script src="https://unpkg.com/vue/dist/vue.js"></script>
          <script>
           var vm=new Vue({
              el: '#app',
            computed: {
              classObject: function () {
                return {
                  show: true,
                  'text-danger': false
                }
              }
            }
          })
          </script>
          </html>
          
          

          "運行案例" 可查看在線運行效果

          結果渲染為:

          <div class="defaultClass show"></div>
          

          代碼解釋: HTML 代碼中,我們通過 classObject 給 div 綁定樣式。 JS 代碼 第 6-11 行,我們定義了計算屬性 classObject,它返回一個對象,該對象有兩個屬性:1. 屬性 show,值為 true,2. 屬性 text-danger,值為 false。所以,最后頁面渲染的效果是:<div class="show"></div>

          2.2 數組語法

          我們可以把一個數組傳給 v-bind:class,以應用一個 class 列表:

          實例演示

          <!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>
          </head>
          <body>
            <div id="app"> 
              <div v-bind:class="[classA, classB]">Hello !</div>
            </div>
          </body>
          <script src="https://unpkg.com/vue/dist/vue.js"></script>
          <script>
           var vm=new Vue({
              el: '#app',
            data: {
              classA: 'classA',
              classB: 'classB1 classB2'
            },
          })
          </script>
          </html>
          
          

          運行案例點擊 "運行案例" 可查看在線運行效果

          渲染為:

          <div class="classA classB1 classB2"></div>
          

          代碼解釋: 在 HTML 代碼中,我們通過數組給 div 綁定樣式,數組中有 classA 和 classB 兩個值。 在 JS 代碼第 6-7 行定義了 classA 和 classB 兩個字符串,它的格式和元素 class 的格式相同,不同的樣式類之間以空格相隔。

          如果你也想根據條件切換列表中的 class,可以用三元表達式:

          <div v-bind:class="[isShow ? showClass : '', classB]"></div>
          

          這樣寫將始終添加 classB 的樣式,但是只有在 isShow 為真時才添加 showClass

          不過,當有多個條件 class 時這樣寫有些繁瑣。所以在數組語法中也可以使用對象的形式來表達數組中的某一項:

          <div v-bind:class="[{ showClass: isShow }, classB]"></div>
          

          代碼解釋: 在 HTML 中,div 綁定一個樣式數組,數組第一項是一個對象表達式 { showClass: isShow }。當 isShow 為 true 時樣式最終綁定為:<div v-bind:class="[showClass, classB]"></div>;當 isShow 為 false 時樣式最終綁定為:<div v-bind:class="[classB]"></div>

          3. 綁定內聯樣式

          和 Class 的綁定一樣,Style 的綁定同樣可以通過數組和對象的兩種形式。

          3.1 對象語法

          v-bind:style 的對象語法十分直觀——看著非常像 CSS,但其實是一個 JavaScript 對象。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case,記得用引號括起來) 來命名:

          實例演示

          <!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>
          </head>
          <body>
            <div id="app"> 
              <div v-bind:style="{ backgroundColor: backgroundColor, width: width + 'px' }"></div>
            </div>
          </body>
          <script src="https://unpkg.com/vue/dist/vue.js"></script>
          <script>
           var vm=new Vue({
              el: '#app',
            data: {
              backgroundColor: 'red',
              width: 300
            }
          })
          </script>
          </html>
          
          

          "運行案例" 可查看在線運行效果

          渲染為:

          <div style=" background-color:red;width: 300px"></div>
          

          代碼解釋: 在 HTML 代碼中,我們給 div 綁定 background-color 和 width 兩個內聯樣式,它們的值在 data 中定義。

          在模板中寫較為復雜的表達式語法顯得比較繁瑣,通常直接綁定到一個樣式對象更好,這會讓模板顯得更加清晰:

          實例演示

          <!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>
          </head>
          <body>
            <div id="app"> 
              <div v-bind:style="styleObject"></div>
            </div>
          </body>
          <script src="https://unpkg.com/vue/dist/vue.js"></script>
          <script>
           var vm=new Vue({
              el: '#app',
            data: {
              styleObject: {
                "background-color": 'red',
                width: '300px'
              }
            },
          })
          </script>
          </html>
          
          

          "運行案例" 可查看在線運行效果

          渲染為:

          <div style="background-color:red;width: 300px"></div>
          代碼塊1

          代碼解釋: 在 HTML 代碼中,我們給 div 綁定數據 styleObject,它們的值在 data 中定義。

          3.2 數組語法

          v-bind:style 的數組語法可以將多個樣式對象應用到同一個元素上:

          實例演示

          <!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>
          </head>
          <body>
            <div id="app"> 
              <div v-bind:style="[stylesA, stylesB]"></div>
            </div>
          </body>
          <script src="https://unpkg.com/vue/dist/vue.js"></script>
          <script>
           var vm=new Vue({
              el: '#app',
            data: {
              stylesA: {
                "background-color": 'red',
                width: '300px'
              },
              stylesB: {
                color: '#fff',
                height: '300px'
              }
            }
          })
          </script>
          </html>
          
          

          "運行案例" 可查看在線運行效果

          渲染為:

          <div style="background-color:red;width: 300px;color:#fff;height:300px"></div>
          

          4. 小結

          本小節我們學習了如何通過v-bind來動態綁定樣式。主要有以下知識點:

          • 通過 v-bind:class 動態綁定元素的 Class;
          • v-bind:style 動態綁定元素的內聯樣式;
          • 如果通過數組和對象的形式給 v-bind:class 和 v-bind:style 賦值。


          本說明:


          涉及到css樣式屬性的都采用,駝峰命名

          什么是駝峰命名? 就是你看到 “-” 就去掉,然后“-” 后面的字母大寫

          例如:background-color 就寫成:backgroundColor對象方式

          特點: 首字母永遠小寫;


          方式1:style方式綁定(6中方法)

          • 1、對象方式
            • 例如: :style="{ backgroundColor: activeColor, fontSize: bitfontSize + 'px' }"
          • 2、數組方式
            • 例如::style="[baseStyles, overridingStyles]"
          • 3 簡單三目運算
            例如::style="[{backgroundColor:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"
          • 4 多值兼容
            例如: :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }" 瀏覽器自己選擇
          • 5 data對象綁定
            例如::style="styleObject" 其中styleObject在data中定義成一個對象
          • 6 css變量方式(本質還是對象方式)
            例如::style="{ --width: widthvalue}" 在css 中 使用 width: var(--width);

          方法2:class方式綁定

          • 7 數組方式
            例如: :class="[active: isActive ]" 這個是官方推薦,表示isActive==true 就加入active這個樣式
          • 8 三目運算(其實也是數組方式)
            例如::class="[activeStyle==index ? 'active':'']"

          、實例與數據

          Vue.js 應用的創建很簡單,通過構造函數 Vue 就可以創建一個 Vue 的根實例,并啟動 Vue 應用:

          var app=new Vue ({
           //選項
          })
          

          變量 app 就代表了這個 Vue 實例。事實上,幾乎所有的代碼都是一個對象,寫入 Vue 實例的選項內的。首先,必不可少的一個選項就是 el 。el 用于指定一個頁面已存在的 DOM 元素來掛載 Vue 實例,它可以是 HTMLElement ,也可以是 CSS 選擇器,比如:

          <div id="app"></div>
          var app=new Vue({
           el: document.getElementById('app') // 或者 el:'#app'
          })
          

          掛載成功后,可以通過 app.$el 來訪問該元素。Vue 提供了很多常用的實例屬性與方法,都以 $ 開頭,比如 $el 。

           <div id="app">
           <input type="text" v-model="name" placeholder="請輸入你的名字">
           <h1>Vue.js 最核心功能:數據的雙向綁定 —— {{ name }}</h1>
           </div>
           <script>
           var app=new Vue ({
           el: '#app',
           data: {
           name: ''
           }
           })
           </script>
          

          上述代碼,在 input 標簽上,有一個 v-model 的指令,它的值對應于創建的 Vue 實例的 data 選項中的 name 字段,這就是 Vue 的數據綁定。通過 Vue 實例的 data 選項,可以聲明應用內需要雙向綁定的數據。建議所有會用到的數據都預先在 data 內聲明,這樣不至于將數據散落在業務邏輯中,難以維護。

          Vue 實例本身也代理了 data 對象里的所有屬性,故可以這樣訪問:

           var app=new Vue({
           el: "#app",
           data: {
           a: 1
           }
           })
           sonsole.log(app.a); //1
          

          除了顯式地聲明數據外,也可以指向一個已有的變量,并且它們之間默認建立了雙向綁定,當修改其中任意一個時,另一個也會一起變化:

           var myData={
           a: 1
           }
           var app=new Vue({
           el: "#app",
           data: {
           a: myData
           }
           })
           sonsole.log(app.a); // 1
           // 修改屬性,原數據也會隨之修改
           app.a=2;
           console.log(myData.a); // 2
           // 反之,修改原數據,Vue 屬性也會修改
           myData.a=3;
           console.log(app.a); // 3
          

          二、生命周期

          每個 Vue 實例創建時,都會經歷一系列的初始化過程,同時也會調用相應的生命周期鉤子,我們可以利用這些鉤子,在合適的時機執行我們的業務邏輯。如果你使用過 jQuery ,一定知道它的 ready() 方法,比如:

           $(document).ready(function() {
           // DOM 加載完后,會執行這里的代碼
           });
          

          Vue 的生命周期鉤子與之類似,比較常用的有:

          • created : 實例創建完成后調用,此階段完成了數據的觀測等,但尚未掛載,$el 還不可用。需要初始化處理一些數據時會比較有用。
          • mounted : el 掛載到實例上后調用,一般我們的第一個業務邏輯會在這里開始。
          • beforeDestroy : 實例銷毀之前調用。主要解綁一些使用 addEventListener 監聽的事件等。

          這些鉤子與 el 和 data 類似,也是作為選項寫入 Vue 實例內,并且鉤子的 this 指向的是調用它的 Vue 實例:

           var app - new Vue({
           el: '#app',
           data: {
           a: 2
           },
           created: function () {
           console.log(this.a); // 2
           }
           mounted: function () {
           console.log(this.$el); // <div id="app"></div>
           }
           })
          

          三、插值與表達式

          使用雙大括號( Mustache 語法 )“ {{ }} ” 是最基本的文本插值方法,它會自動將我們雙向綁定的數據實時顯示出來,例如實時顯示當前時間,每秒更新:

           <script>
           var app=new Vue ({
           el: '#app',
           data: {
           date: new Date()
           },
           mounted: function () {
           var _this=this; // 聲明一個變量指向 Vue 實例 this, 保證作用域一致
           this.timer=setInterval(function() {
           _this.date=new Date(); // 修改數據 date
           }, 1000); // 1秒
           },
           beforeDestroy: function () {
           if (this.timer) {
           clearInterval(this.timer); // 在 Vue 實例銷毀前,清除我們的定時器
           }
           }
           })
           </script>
          

          雙大括號里的內容會被替換為 data 選項中 date 的值,通過任何方法修改數據 data 選項中 date 的值,雙大括號的內容都會被實時替換。這里的 {{ date }} 輸出的是瀏覽器默認的時間格式,并非格式化的時間( 2018-10-07 10:05:59 ),所以需要注意時區。有多種方法可以對時間格式化,比如賦值前先使用自定義的函數處理。當然,Vue 的過濾器 ( filter )或計算屬性 ( computed )也可以實現。

          如果有時候就是想輸出 HTML,而不是將數據解釋后的純文本,可以使用 v-html:

           <div id="app">
           <span v-html="link"></span>
           </div>
           <script>
           var app=new Vue({
           el: '#app',
           data: {
           link: '<a 
           }
           })
           </script>
          

          link 的內容將會被渲染為一個具有點擊功能的 a 標簽,而不是純文本。但是要注意,如果將用戶產生的內容使用 v-html 輸出后,有可能導致 XSS 攻擊(跨站腳本攻擊),所以要在服務端對用戶提交的內容進行處理,一般可將尖括號 “<>” 轉義。

          如果想顯示 {{ }}標簽,而不進行替換,使用 v-pre 即可跳過這個元素和它的子元素的編譯過程,例如:

          <span v-pre>{{ 這里會顯示雙花括號,內容不會被編譯 }}</span>
          

          在 {{ }} 中,除了簡單的綁定屬性值外,還可以使用 JavaScript 表達式進行簡單的運算、三元運算等,例如:

           <div id="app">
           {{ num / 100 }}
           {{ areYouOK ? '確定' : '取消' }}
           {{ text.split(',').reverse().join(',') }}
           </div>
           <script>
           var app=new Vue({
           el: '#app',
           data: {
           num: 100,
           areYouOK:false,
           text: '123,456'
           }
           })
           </script>
          

          顯示結果依次為:1、取消、456,123 。

          Vue.js 只支持單個表達式,不支持語句和流控制。另外,在表達式中,不能使用用戶自定義的全局變量,只能使用 Vue 白名單內的全局變量,例如 Math 和 Date 。以下是一些無效的示例:

           <!-- 這是語句,不是表達式 -->
           {{ var text='123,456' }}
           <!-- 不能使用流控制,要使用三目運算 -->
           {{ if (areYouOK) return msg }}
          

          四、過濾器

          Vue.js 支持在 {{ }} 插值的尾部添加一個管道符“ ( | ) ” 對數據進行過濾,經常用于格式化文本,比如字母全部大寫、貨幣千位使用逗號分隔等。過濾的規則是自定義的,通過給 Vue 實例添加選項 filters 來設置,例如可以對時間進行格式化處理,實時顯示當前時間:

           <div id="app">
           {{ date | formatDate }}
           </div>
           <script>
           
           // 在月份、日期、小時等小于 10 時前面補 0
           var padDate=function(value) {
           return value < 10 ? '0' + value : value;
           };
           var app=new Vue({
           el: "#app",
           data: {
           date: new Date()
           },
           filters: {
           formatDate: function (value) { // 這里的 value 就是需要過濾的數據
           var date=new Date(value);
           var yaer=date.getFullYear();
           var month=padDate(date.getMonth() + 1);
           var day=padDate(date.getDate());
           var hours=padDate(date.getHours());
           var minutes=padDate(date.getMinutes());
           var seconds=padDate(date.getSeconds());
           // 整理返回格式化后的日期
           return yaer + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
           }
           },
           mounted: function () {
           var _this=this; // 聲明一個變量指向 Vue 實例 this , 保證作用域一致
           this.timer=setInterval({
           _this.date=new Date(); // 修改數據 date
           }, 1000);
           },
           beforeDestroy: function() {
           if (this.timer) {
           clearInterval(this.timer); // 在 Vue 實例銷毀前,清除我們的定時器
           }
           }
           })
           </script>
          

          過濾器也可以串聯,而且可以接收參數,例如:

           <!-- 串聯 -->
           {{ message | filterA | filterB }}
           <!-- 接收參數 -->
           {{ message | filterA('arg1', 'arg2') }}
          

          過濾器應當用于處理簡單的文本轉換,如果要實現更為復雜的數據變換,應該使用計算屬性。


          主站蜘蛛池模板: 日韩精品区一区二区三VR| 韩国一区二区三区| 日韩亚洲AV无码一区二区不卡| 精品久久综合一区二区| 台湾无码一区二区| 日韩精品无码一区二区三区AV| 亚洲Av永久无码精品一区二区 | 精品深夜AV无码一区二区老年| 亚洲无人区一区二区三区| 婷婷国产成人精品一区二| 色综合视频一区中文字幕| 竹菊影视欧美日韩一区二区三区四区五区| 国产成人无码AV一区二区在线观看 | 在线观看国产一区二区三区| 国产乱码一区二区三区| 亚洲色偷偷偷网站色偷一区| 亚洲综合一区二区精品导航| 乱码精品一区二区三区| 亚洲一区二区三区在线网站| 亚洲国产激情在线一区| 伊人色综合一区二区三区影院视频| 69久久精品无码一区二区| 亚洲大尺度无码无码专线一区| 中文字幕乱码人妻一区二区三区| 国产精品福利一区二区久久| 亚洲性无码一区二区三区| 国产香蕉一区二区三区在线视频| 国产精品成人免费一区二区| 免费萌白酱国产一区二区| 精品一区二区三区色花堂| 国产在线精品一区二区中文| 在线视频一区二区| 国产精品久久久久一区二区三区| 日韩一区二区在线观看| 中文字幕人妻丝袜乱一区三区| 日韩一区精品视频一区二区| 无码人妻aⅴ一区二区三区| 日本精品一区二区三区在线视频| 东京热无码一区二区三区av| 末成年女AV片一区二区| 日韩在线一区视频|