v-bind -- 標簽屬性動態綁定 · Vue&&TypeSprict--基礎總結

[TOC] >[success] # v-bind 給標簽屬性綁定使用 ~~~ 1.v-bind 是讓標簽屬性可以動態的使用data參數或者寫一些簡單的js表達式 2.和v-text，v-html不同它倆是針對標簽中的內容，v-bind 是針對標簽中的屬性，但是這個三個指令和大胡子語法不同，這三個指令都是在標簽屬性中定義 3.v-bind的縮寫是冒號':' ~~~ >[danger] ##### v-bind 案例 ~~~ 1.簡單的說也就是當我們想讓標簽中的屬性可以和vue實例中的data形成綁定賦值的時候，就可以使用v-bind 2.或者當我們想讓這個標簽可以通過一些三元表達式展示一些我們想的到的效果，也可以使用v-bind讓標簽中的屬性形成可以運行表達式的效果 ~~~ ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app" > <a v-bind:href="url" v-bind:title="title">v-bind的縮寫是冒號:</a> </div> <script> var vm = new Vue({ el:"#app", data:{ url:"www.baidu.com", title:'百度' } }) </script> </body> </html> ~~~ >[danger] ##### 使用v-bind 綁定一組屬性 ~~~ 1.正常使用'v-bind:href="www.baidu.com"'，當'v-bind' 不在為某個指定參數去賦值的時候，可以直接賦值一個包含鍵值對的對象，但這時候的class 和 style 不能再綁定為數組和對象 2.可以有三種寫法: 2.1.案例第一種寫法直接在html v-bind后面寫上你綁定的對象，但這種寫法沒有實際意義，因為不是動態去綁定某些值，不如直接采用html寫法列如：<a id="vid" href="www.baidu.com">測試</a> 2.2.案例的第二種寫法其實和普通使用'v-bind' 類似只不過這個時候不是指定某個參數去賦值，而是直接綁定是對象 2.3.案例三和案例二的區別可以理解成，案例三是只是動態去改變value，案例二是動態綁定一組屬性和屬性對應的key 3.要注意的是這種用法不能縮寫成':=' ~~~ ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> </head> <body> <div id="app">  <a v-bind='{id:"vid",href:"www.baidu.com"}'>測試</a>  <a v-bind="attrObj">測試1</a>  <a v-bind="{id:aId,href:aHref}">測試2</a> </div> <script> var vm = new Vue({ el:'#app', data:{ attrObj:{id:'attrId',href:'www.baidu.com'}, aId:'aId', aHref:'www.baidu.com', } }) </script> </body> </html> ~~~ >[danger] ##### 2.6 + 新增的動態參數綁定 ~~~ 1.用法就像下面案例寫的一樣，不過里面有個坑，先引用文檔中說的一個解釋: '在 DOM 中'使用模板時 (直接在一個 HTML 文件里撰寫模板)，還需要'避免使用大寫字符來命名鍵名'，因為'瀏覽器會把 attribute 名全部強制轉為小寫' 2.解釋文檔中這句話：下面案例中js里面的'dynamickey' 正確命名規范是小駝峰的方式應該是'dynamicKey',但是如果這么命名，在html 里面去使用的時候':[dynamicKey]' 在編譯的時候會編譯成成':[dynamickey]',但是你vue參數中的命名是和編譯后的命名一個是'dynamicKey'一個是'dynamickey',因此就會報錯 3.第二個注意點就是引用文檔中說的： '動態參數表達式有一些語法約束，因為某些字符，如空格和引號，放在 HTML attribute 名里是無效的'  <a v-bind:['foo' + bar]="value"> ... </a> ~~~ ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> </head> <body> <div id="app">  <a :[dynamickey]="hrefLink">2.6+增加的動態key</a>  </div> <script> var vm = new Vue({ el:'#app', data:{ hrefLink:'www.baidu.com', dynamickey:'href' // 動態key 可以用動態參數決定 } }) </script> </body> </html> ~~~ >[danger] ##### 駝峰形式的dom屬性使用v-bind綁定 -- .camel ~~~ 1.上一個案例已經說了，在編輯過程中會把駝峰形式的屬性全部轉換成小寫，如果此時這個屬性就是駝峰形式的寫法，想使用'v-bind' 來動態綁定的話需要兩個步驟 1.1. 使用'.camel'來修飾 1.2.使用'-'將駝峰分割開來 ~~~ * 案例說明 ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> </head> <body> <div id="app">  <svg :view-box.camel="viewBox" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100%" height="100%"/> <circle cx="50%" cy="50%" r="4" fill="white"/> </svg> </div> <script> var vm = new Vue({ el:'#app', data:{ viewBox:'0 0 100 100' } }) </script> </body> </html> ~~~