vue表單入門使用須知

這次帶給大家vue表單入門使用須知，vue表單入門使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

一、基本用法

你可以用v-model 指令在表單 及 元素上建立雙向<a href="http://www.php.cn/code/7876.html" target="_blank">資料綁定</a>。

但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。

v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的資料作為資料來源。你應該透過 JavaScript 在元件的 data 選項中聲明初始值。

一組程式碼，看完text、textarea、radio、checkbox、select的基本用法：

<p>
  <input><label>{{message}}</label>
  <textarea></textarea><label>{{message1}}</label>
  <!--单选按钮在单独使用时,不需要v-model,直接使用v-bind 绑定一个布尔类型的值,为真时选中,为否时不选-->
  <input><label>单选按钮</label>
  <!--如果是组合使用来实现互斥选择的效果,就需要v-model 配合value来使用：-->
  <input><label>男</label>
  <input><label>女</label>
  <!--复选框使用数组类型的数据匹配-->
  <input><label>跑步</label>
  <input><label>爬山</label>
  <input><label>滑雪</label>
  <!--单选时的选择框,多选时加multiple属性就可以了-->
  <!--但我们一般都不用原生的这种下拉框，不美观，扩展功能也不好，一般会用插件或自己封装一个-->
  <select>
   <option>请选择</option>
   <option>html</option>
   <option>javascript</option>
   <option>css</option>
  </select>
  <!--用 v-for 渲染的动态选项-->
  <select>
   <option>
    {{option.text}}
   </option>
  </select>
 </p>
var app7 = new Vue({
 el: '#app7',
 data:{
  message: '单行文本',
  message1: '多行文本',
  picked: true,
  sex: 'boy',
  hobby: ['爬山','滑雪'],
  select: 'css',
  selected: 'A',
  options: [
   { text: 'One', value: 'A' },
   { text: 'Two', value: 'B' },
   { text: 'Three', value: 'C' }
  ]
 }
});

二、值綁定

單選按鈕、複選框和選擇清單在單獨使用或單選的模式下， v-model 綁定的值是一個靜態字串或布林值， 但在業務中，有時需要綁定一個動態的數據， 這時可以用v-bind 來實現。

一組程式碼，看完表單常用radio、checkbox、select的值綁定：

 <p>
  <!--单选按钮,利用value动态绑定，在选中时，app.picked === app.value, 值都是boy-->
  <input>
  <label>单选按钮</label>
  </p><p>{{picked}}</p>
  <p>{{value}}</p>
  <!--复选框,利用true-value与false-value动态绑定,勾选时,app.toggle == app.value1; 未勾选时，app.toggle == app.value2-->
  <input>
  <label>复选框</label>
  <p>{{toggle}}</p>
  <p>{{value1}}</p>
  <p>{{value2}}</p>
  <!--选择列表,当选中时,app.selected 是一个Object ，所以app.selected.number == 123-->
  <select>
   <option>123</option>
  </select>
  {{selected.number}}
 
var app8 = new Vue({
 el: '#app8',
 data:{
  picked: false,
  value: 'boy',
  toggle: false,
  value1: 'a',
  value2: 'b',
  selected: ''
 }
});

三、修飾符

## 與事件的修飾符類似， v-model 也有修飾符，用來控制資料同步的時機。

一組程式碼，看完常用修飾符lazy、number、trim

<p>
  <!-- .lazy:
  在输入框中， v-model 默认是在input 事件中同步输入框的数据（除了提示中介绍的中文输入法情况外），
  使用修饰符.lazy 会转变为在change 事件中同步，这时，message 并不是实时改变的，而是在失焦或按回车时才更新。-->
  <input>
  </p><p>{{message}}</p>
  <!--.number:
  使用修饰符.number 可以将输入转换为Number 类型，否则虽然你输入的是数字，但它的类型其实是String ，比如在数字输入框时会比较有用-->
  <input>
  <p>{{typeof number}}</p>
  <!-- .trim:
  修饰符.trim 可以自动过滤输入的首尾空格-->
  <input>
  <p>{{text}}</p>
 
var app9 = new Vue({
 el: '#app9',
 data:{
  message: '',
  number: '',
  text: ''
 }
});

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何檢視已修改文件日期和文件大小

vue-infinite-loading2.0使用說明

以上是vue表單入門使用須知的詳細內容。更多資訊請關注PHP中文網其他相關文章！