v-bind和v-model詳解

1 v-bind

v-bind綁定屬性：:屬性名 => v-bind:屬性名

綁定class

數組：:class="[active, line]"

對象：:class="{active: isActive , line: isLine}"

綁定style

:style="{color: fontColor}"  （樣式名：樣式值）

data: {

    fontColor:'black'

}

2 v-model

    v-model的雙向綁定原理：通過v-bind將model數據綁定進頁面，然后又通過v-on綁定事件來監聽頁面的變化，並將變化了的數據重新綁定進model數據中。

v-model對表單的綁定：

單選框：

<label for="male">
  <input type="radio" id="male" v-model="sex" value="男">男
</label>
-性別為{{sex}}-
<label for="female">
  <input type="radio" id="female" v-model="sex" value="女">女
</label>

sex:'男',//單選框綁定v-model 選中|不選中 對應 綁定的值 是|不是 對應的value

多選框(單個):

<label for="agree">
  <input type="checkbox" id="agree" v-model="isAgree">同意協議
</label>
{{isAgree}}
<button :disabled="!isAgree">下一步</button>

isAgree:false,//單個多選框對應是布爾值 （即v-mode綁定的不是數組時，選中|不選中對應true|false）

多選框(多個):

<input type="checkbox" id="basketball" v-model="hobbies" value="籃球">籃球
<input type="checkbox" id="baseball" v-model="hobbies" value="棒球">棒球
<input type="checkbox" id="deskball" v-model="hobbies" value="桌球">桌球
愛好是{{hobbies}}

hobbies:[],//多個多選框對應的是數組 （v-model綁定的是數組時，選中|不選中對應的是向數組加入value|不加入value）

選項卡（單選）：

<select name="singleSelect" v-model="fruit">
  <option value="蘋果">蘋果</option>
  <option value="香蕉">香蕉</option>
  <option value="西瓜">西瓜</option>
</select>
單選水果為：{{fruit}}

fruit:'香蕉',//選項卡單選，與單選框類似只能選單個 對應類型為str

選項卡（多選）：

<select name="multipleSelect" v-model="fruits" multiple>
  <option value="蘋果">蘋果</option>
  <option value="香蕉">香蕉</option>
  <option value="西瓜">西瓜</option>
</select>
多選水果為：{{fruits}}

fruits:[],//選項卡多選，與多個多選框類似能選多個 對應類型為數組

  實際開發中應用的v-model值綁定（從服務器請求的value）：

<!--從服務器取得數據並渲染頁面，選中的選項信息保存於List中-->
<label v-for="item in originalList" :for="item.id">
  <input :id="item.id" type="checkbox"  v-model="List" :value="item">{{item.value}}
</label>
{{List}}

originalList:[{id:1,value:'大西瓜'},{id:2,value:'小蘋果'},{id:3,value:'臭榴蓮'}],//從服務器取得的數據
List:[],//選中的選項的數據存放地 與v-model綁定

v-model事件修飾符：

1 v-model.lazy 只有按下enter或者失去光標時才會響應式更新數據
2 v-model.number 在輸入框中無論輸入什么都會被默認轉化成string類型，用這個修飾符后number類型不會被轉化
3 v-model.trim 如果輸入的內容首尾有空格，則會自動去除空格