這次帶給大家Vue.js操作表單控制項步驟詳解,Vue.js操作表單控制項的注意事項有哪些,以下就是實戰案例,一起來看一下。
v-model指令:在表單控制項元素上建立雙向資料綁定。 v-model 會根據控制項類型自動選取正確的方法來更新元素。
#實例中示範了input 和textarea 元素中使用v-model 實作雙向資料綁定:
HTML
nbsp;html> <meta> <title>Vue 测试实例</title> <script></script> <p> </p><p>input 元素:</p> <input> <p>消息是: {{ message }}</p> <p>textarea 元素:</p> <p>{{ message2 }}</p> <textarea></textarea> <script> new Vue({ el: '#app', data: { message: 'Runoob', message2: '菜鸟教程\r\nhttp://www.runoob.com' } }) </script>
#HTML
nbsp;html> <meta> <title>Vue 测试实例 </title> <script></script> <p> </p><p>单个复选框:</p> <input> <label>{{ checked }}</label> <p>多个复选框:</p> <input> <label>Runoob</label> <input> <label>Google</label> <input> <label>taobao</label> <br> <span>选择的值为: {{ checkedNames }}</span> <script> new Vue({ el: '#app', data: { checked : false, checkedNames: [] } }) </script>
HTML#
nbsp;html> <meta> <title>Vue 测试实例 </title> <script></script> <p> <input> <label>Runoob</label> <br> <input> <label>Google</label> <br> <span>选中值为: {{ picked }}</span> </p> <script> new Vue({ el: '#app', data: { picked : 'Runoob' } }) </script>
HTML
nbsp;html> <meta> <title>Vue 测试实例</title> <script></script> <p> <select> <option>选择一个网站</option> <option>Runoob</option> <option>Google</option> </select> </p><p> 选择的网站是: {{selected}} </p> <script> new Vue({ el: '#app', data: { selected: '' } }) </script>修飾符
.lazy在預設情況下, v-model 在input 事件中同步輸入框的值與數據,但你可以添加一個修飾符lazy ,從而轉變為在change 事件中同步:
<!-- 在 "change" 而不是 "input" 事件中更新 --> <input>
.number
如果想自動將使用者的輸入值轉為Number 類型(如果原值的轉換結果為NaN 則傳回原值),可以新增一個修飾符number 給v-model 來處理輸入值:
<input>
這通常很有用,因為在type="number" 時HTML 中輸入的值也總是會傳回字串類型。 .trim
如果要
用戶輸入的首尾空格,可以添加trim 修飾符到v-model 上過濾輸入:<input>
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
以上是Vue.js操作表單控制項步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!