Vue前端學習筆記-007-v-model;v-bind傻傻分不清楚

參考連接:segmentfault.com/a/119000001…

1.v-model  實現雙向數據綁定,用在表單中.在表單元素外使用不起做用(這句話還沒理解..)

2.v-bind 用來綁定數據和屬性以及表達式,用在組件中,縮寫爲':'

v-bind使用例子

1.綁定文本/值 <p v-bind = "message"></p> 或者 <p>{{message}}</p> 2.綁定屬性 <img :src="./assets/logo.png"></img> 3.綁定表達式 {{str.split('.').reverse().join('')}} 4.綁定html(這個以爲之前jsp也用過就是拼接html) <div>{{{raw_html}}}</div> 這裏是三個{}哦.... 複製代碼

v-model使用例子

1.綁定text <input type="text" v-model="myPersonName"></input> {{myPersonName}} 2.綁定radio <input type="radio" value="1" v-model="radioVal"/> <input type="radio" value="2" v-model="radioVal"/> <label for v-bind="radioVal"/> 這樣,radioVal的值會隨着單選框的選擇,變成1或者2 3.綁定checkBox <input type="checkbox" v-model="checkVal"/> <label for="checkbox">{{checkVal}}</label> 勾選/取消勾選複選框 checkVal的值會變成true或者false 若是是多個勾選框,會將值綁定到一個數組 <input type="checkbox" value="apple" v-model="checkArray"/> <label for="checkbox">{{apple}}</label> <input type="checkbox" value="banana" v-modle="checkArray"/> <label for="checkbox">{{banana}}</label> <input type="checkbox" value="pear" v-model="checkArray"/> <label for="checkbox">{{pear}}</label> <span>{{checkArray | json}}</span> 這句就是循環輸出了checkArray的值. 此處涉及了vue過濾器的知識點, 參考網址: https://www.cnblogs.com/yc-1314/p/10243361.html --主要講內置過濾器 https://www.cnblogs.com/wangruifang/p/7765562.html--講自定義過濾器 4.綁定select 參考了官方文檔:https://v1-cn.vuejs.org/guide/forms.html#Select <select v-model="selected"> <option selected>A</option> <option>B</option> <option>C</option> </select> <span>您選擇了{{selected}}</span> 多選:綁定到一個數組 <select v-model="selected" multiple> <option selected>A</option> <option>B</option> <option>C</option> </select> <span>您選擇了:{{selected | json}}</span> ----------------------圈住要考------------------------------------ 官方文檔真是貼心,知道我想要的是動態選項: <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{option.text}} </option> </select> <span>您選擇了:{{selected}}</span> new Vue( { el:'...', data:{ selected:'A', options:[ {text:'One',value:'A'}, {text:'Two',value:'B'}, {text:'Three',value:'C'} ] } } ) ------------------------------------------------------------------ 複製代碼