雙向繫結v-model與表單元素，修飾符.lazy,.number,.trim
阿新 • • 發佈：2020-08-21
v-model
-
預期：隨表單控制元件型別不同而不同。
-
限制：
<input><select><textarea>- components
-
修飾符：
-
用法：
在表單控制元件或者元件上建立雙向繫結。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雙向繫結v-model與表單元素，修飾符.lazy,.number,.trim</title> </head> <body> <div id="app"> <input type="text" :value="message" placeholder='繫結值' @input = "valueChange"> <input type="text" :value="message" placeholder='繫結值' @input = "message = $event.target.value"> <!-- v-model --> <input type="text" v-model="message" placeholder='雙向繫結'> {{message}} <div> <!-- 單選按鈕 如果沒有繫結v-model ,要加name才是單選--> <input type="radio" id= "male" value="男" v-model="sex"> <label for="male">男</label> <input type="radio" id= "female" value="女" v-model="sex"> <label for="female">女</label> <h3>性別是：{{sex}}</h3> </div> <div> <!--checkbox 單選框 返回true,false --> <lable> <input type="checkbox" id="agree" v-model="isAgree">同意協議 </lable> <button :disabled="!isAgree">下一步</button> </div> <div> <!--checkbox多選框--> <input type="checkbox" value="籃球" v-model="hobbies">籃球 <input type="checkbox" value="足球" v-model="hobbies">足球 <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球 <input type="checkbox" value="網球" v-model="hobbies">網球 <h3>你的愛好是：{{hobbies}}</h3> <!--值繫結--> <label v-for="item in hobbiesList"> <input type="checkbox" :id="item" :value="item" v-model="hobbies" >{{item}} </label> </div> <div> <!-- 選擇框--> <select v-model="hobbiesS"> <option disabled value=''>請選擇</option> <option >籃球</option> <option >足球</option> <option >羽毛球</option> <option >網球</option> </select> <h3>你的愛好是：{{hobbiesS}}</h3> </div> <div> <!--修飾符：lazy ,回車enter時和失去聚焦時，才是輸入--> <input v-model.lazy="message2"> <h4>{{message2}}</h4> <!--修飾符；number，讓輸入框內的內容轉為數字型別--> <input type="number" v-model.number="age"> <h4>{{age}}--型別：{{typeof age}}</h4> <!--修飾符：trim ,過濾內容左右兩邊的空格--> <input v-model.trim="message2"> <h4>值：{{message2}}</h4> </div> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello', sex: '', isAgree: '', hobbies: [], hobbiesS:'', hobbiesList:['香蕉','牛奶','蘋果','栗子'], message2:'加油', age: '', }, methods: { sub: function () { }, valueChange(event){ this.message = event.target.value } } }) </script> </body> </html>