vue表單控件綁定（表單數據的自動收集）

v-model指令

你可以用 v-model 指令在表單控件元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇

但 v-model 本質上不過是語法糖，它負責監聽用戶的輸入事件以更新數據，並特別處理一些極端的例子

v-model 並不關心表單控件初始化所生成的值。因為它會選擇 Vue 實例數據來作為具體的值

<template>
  <div id="app">
    <input v-model="message" placeholder="edit me" />
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      message: ''
    }
  }
}
</script>

 

多行文本輸入框

在文本區域插值( <textarea></textarea> ) 並不會生效，應用 v-model 來代替

<template>
  <div id="app">
    <textarea v-model="message" placeholder="edit me" />
    <!--style="white-space: pre"可以解析換行-->
    <p style="white-space: pre">{{message}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      message: ''
    }
  }
}
</script>

 

 

 

復選框

單個勾選框，邏輯值

<template>
  <div id="app">
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">{{checked}}</label>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      checked: false
    }
  }
}
</script>

多個勾選框，綁定到同一個數組

<template>
  <div id="app">
    <input type="checkbox" id="apple" value="apple" v-model="checkedName" />
    <label for="apple">apple</label>

    <input type="checkbox" id="orange" value="orange" v-model="checkedName" />
    <label for="orange">orange</label>

    <input type="checkbox" id="banana" value="banana" v-model="checkedName" />
    <label for="banana">banana</label>

    <p>{{checkedName}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      checkedName: []
    }
  }
}
</script>

 

單選按鈕

<template>
  <div id="app">
    <input type="radio" id="apple" value="apple" v-model="checkedName" />
    <label for="apple">apple</label>

    <input type="radio" id="orange" value="orange" v-model="checkedName" />
    <label for="orange">orange</label>

    <input type="radio" id="banana" value="banana" v-model="checkedName" />
    <label for="banana">banana</label>

    <p>{{checkedName}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      checkedName: 'apple'
    }
  }
}
</script>

 

列表選擇—單選列表/多選列表

<template>
  <div id="app">
    <select v-model="selected">
      <option>apple</option>
      <option>orange</option>
      <option>banana</option>
    </select>

    <p>{{selected}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      selected: 'apple'
    }
  }
}
</script>

多選綁定到一個數組（需要按住Ctrl進行多選）

<template>
  <div id="app">
    <select v-model="selected" multiple>
      <option>apple</option>
      <option>orange</option>
      <option>banana</option>
    </select>

    <p>{{selected}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      selected: []
    }
  }
}
</script>

 

動態選項，用 v-for 渲染

<template>
  <div id="app">
    <select v-model="selected">
      <option v-for="option in options" :value="option.value">{{option.name}}</option>
    </select>

    <p>{{selected}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      selected: 'a',
      options: [
        {name: 'apple', value: 'a'},
        {name: 'orange', value: 'o'},
        {name: 'banana', value: 'b'}
      ]
    }
  }
}
</script>

 

 

修飾符——lazy

在默認情況下， v-model 在 input 事件中同步輸入框的值與數據 ，但你可以添加一個修飾符 lazy ，從而轉變為在 change 事件中同步

在輸入框失去焦點或者電腦窗口改變后或者按enter時，數據會同步更新

<template>
  <div id="app">
    <input type="text" v-model.lazy="message" />
    {{message}}
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      message: ''
    }
  }
}
</script>

 

修飾符——number

如果想自動將用戶的輸入值(輸入框輸入的值都是字符串類型)轉為 Number 類型（如果原值的轉換結果為 NaN 則返回原值），可以添加一個修飾符 number給 v-model 來處理輸入值

<template>
  <div id="app">
    <input type="text" v-model.number="message" />
    {{message}}
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      message: ''
    }
  }
}
</script>

 

 

修飾符—— trim

如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入

<template>
  <div id="app">
    <input type="text" v-model.trim="message" />
    {{message}}
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      message: ''
    }
  }
}
</script>

 

 

 

修飾符—— prevent

阻止表單提交的默認事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>08_表單輸入綁定</title>
</head>
<body>
<div id="demo">
  <form action="/xxx" @submit.prevent="handleSubmit">
    <span>用戶名: </span>
    <input type="text" v-model="username"><br>

    <span>密碼: </span>
    <input type="password" v-model="pwd"><br>

    <span>性別: </span>
    <input type="radio" id="female" value="女" v-model="sex">
    <label for="female">女</label>
    <input type="radio" id="male" value="男" v-model="sex">
    <label for="male">男</label><br>

    <span>愛好: </span>
    <input type="checkbox" id="basket" value="basket" v-model="likes">
    <label for="basket">籃球</label>
    <input type="checkbox" id="foot" value="foot" v-model="likes">
    <label for="foot">足球</label>
    <input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
    <label for="pingpang">乒乓</label><br>

    <span>城市: </span>
    <select v-model="cityId">
      <option value="">未選擇</option>
      <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option>
    </select><br>
    <span>介紹: </span>
    <textarea rows="10" v-model="info"></textarea><br><br>

    <input type="submit" value="注冊">
  </form>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      username: '',
      pwd: '',
      sex: '男',
      likes: ['foot'],
      allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}],
      cityId: '2',
      info: ''
    },
    methods: {
      handleSubmit () {
        console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info)
        alert('提交注冊的ajax請求')
      }
    }
  })
</script>
</body>
</html>