A: hi! ~ Hello everyone, I am YK bacteria 🐷, a microsystem front-end ✨, love to think, love to summarize, love to record, love to share 🏹, welcome to follow me 😘 ~ [wechat account: Yk2012Yk2012, wechat public account: ykyk2012]

“This is the 21st day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

Today we will study the basic use of V-model in Vue

Data is collected automatically using v-Model (two-way data binding)

  • text/textarea
  • checkbox
  • radio
  • select

text

<! DOCTYPEhtml>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Collect form data</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>

<body>
  <! <input type="text"/> <input type="text"/> <input type="text"/> -->
  <! -- Get a container ready -->
  <div id="root">
    <form @submit.prevent="demo">Account:<input type="text" v-model.trim="userInfo.account"> <br /><br />Password:<input type="password" v-model="userInfo.password"> <br /><br />Age:<input type="number" v-model.number="userInfo.age"> <br /><br />
      <button>submit</button>
    </form>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false

  new Vue({
    el: '#root'.data: {
      userInfo: {
        account: ' '.password: ' '.age: 18}}})</script>

</html>
Copy the code

radio

, then the V-model collects values and sets values for the tag.

<! DOCTYPEhtml>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Collect form data</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>

<body>
  <! <input type="radio"/> <input type="radio"/> <input type="radio"/> -->
  <! -- Get a container ready -->
  <div id="root">
    <form @submit.prevent="demo">Account:<input type="text" v-model.trim="userInfo.account"> <br /><br />Password:<input type="password" v-model="userInfo.password"> <br /><br />Age:<input type="number" v-model.number="userInfo.age"> <br /><br />Gender: male<input type="radio" name="sex" v-model="userInfo.sex" value="male">
      女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br /><br />
      <button>submit</button>
    </form>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false

  new Vue({
    el: '#root'.data: {
      userInfo: {
        account: ' '.password: ' '.age: 18.sex: 'female'}}})</script>

</html>
Copy the code

checkbox

<input type="checkbox"/>

  1. If the value attribute for input is not configured, checked is collected.

  2. Configure the value attribute for input:

    1. The initial value of the V-model is not an array, so checked is collected.
    2. The initial values of the V-model are arrays, so the collection is an array of values!!

Note: Three modifiers for v-model:

  • lazy: Lose focus before collecting data
  • number: Converts the input string to a valid number
  • trim: Enter Spaces at the beginning and end

The sample

<! DOCTYPEhtml>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Collect form data</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>

<body>
  <! <input type="text"/> <input type="text"/> <input type="text"/> If: <input type="radio"/>, the V-model collects values and sets values for labels. If: <input type="checkbox"/> 1. If the input value attribute is not configured, checked (or is not checked) 2 is collected. Configure the value attribute for input: (1) If the initial value of the V-model is not an array, checked or checked is a Boolean value. (2) If the initial value of the V-model is an array, checked is an array of values. Lost focus to collect data number: input string into a valid number trim: input space filter -->
  <! -- Get a container ready -->
  <div id="root">
    <form @submit.prevent="demo">Account:<input type="text" v-model.trim="userInfo.account"> <br /><br />Password:<input type="password" v-model="userInfo.password"> <br /><br />Age:<input type="number" v-model.number="userInfo.age"> <br /><br />Gender: male<input type="radio" name="sex" v-model="userInfo.sex" value="male">
      女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br /><br />Hobbies: Learning<input type="checkbox" v-model="userInfo.hobby" value="study">Play the game<input type="checkbox" v-model="userInfo.hobby" value="game">Have a meal<input type="checkbox" v-model="userInfo.hobby" value="eat">
      <br /><br />Subordinate to the campus<select v-model="userInfo.city">
        <option value="">Please select campus</option>
        <option value="beijing">Beijing</option>
        <option value="shanghai">Shanghai</option>
        <option value="shenzhen">shenzhen</option>
        <option value="wuhan">wuhan</option>
      </select>
      <br /><br />Other information:<textarea v-model.lazy="userInfo.other"></textarea> <br /><br />
      <input type="checkbox" v-model="userInfo.agree">Read and accept<a href="http://www.atguigu.com">User Agreement</a>
      <button>submit</button>
    </form>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false

  new Vue({
    el: '#root'.data: {
      userInfo: {
        account: ' '.password: ' '.age: 18.sex: 'female'.hobby: [].city: 'beijing'.other: ' '.agree: ' '}},methods: {
      demo() {
        console.log(JSON.stringify(this.userInfo))
      }
    }
  })
</script>

</html>
Copy the code

Finally, welcome to my column and make friends with YK bacteria