9. The use of bidirectional binding instructions in forms

Input bidirectional binding

Two-way binding: you change, I change, I change, you change, all the time!

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello World'}},// Input uses v-model without value
    template: ` 
       

         {{ message }} 
        

 
         
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Textarea bidirectional binding

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello World'}},// Write the textarea as follows, and pass the rest to vue
    template: ` 
       

         {{ message }} 
        

 
         </div> `
       

  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Checkbox Specifies an option

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: false
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>
          <input type="checkbox" v-model="message" />
        </div>`}); const vm = app.mount('#root');</script>

</html>
Copy the code

The results

Checkbox

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: []
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>The eldest brother liu bei<input type="checkbox" v-model="message" value="Brother Liu Bei" /><br/>Second brother guan yu<input type="checkbox" v-model="message" value="Second brother Guan Yu" /><br/>Three elder brother zhang fei<input type="checkbox" v-model="message" value="Third brother Zhang Fei" /><br/>Four elder brother zhaoyun<input type="checkbox" v-model="message" value="The fourth brother Zhao Yun" /><br/>
        </div>`}); const vm = app.mount('#root');</script>

</html>
Copy the code

The results

Radio optional notation

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>Const app = vue.createApp ({data() {return {message: 'unchecked'}}, template: '<div>
          {{ message }}
          <br/>The eldest brother liu bei<input type="radio" v-model="message" value="Brother Liu Bei" /><br/>Second brother guan yu<input type="radio" v-model="message" value="Second brother Guan Yu" /><br/>Three elder brother zhang fei<input type="radio" v-model="message" value="Third brother Zhang Fei" /><br/>Four elder brother zhaoyun<input type="radio" v-model="message" value="The fourth brother Zhao Yun" /><br/>
        </div>`}); const vm = app.mount('#root');</script>

</html>
Copy the code

The results

Select indicates the single option

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>Const app = vue.createApp ({data() {return {// A default is recommended because the first message is checked: 'message'}}, template: '<div>
          {{ message }}
          <br/>
          <select v-model="message">
            <option>The eldest brother liu bei</option>
            <option>Second brother guan yu</option>
            <option>Three elder brother zhang fei</option>
            <option>Four elder brother zhaoyun</option>
          </select>
        </div>`}); const vm = app.mount('#root');</script>

</html>
Copy the code

The results

Select multiple options

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: []
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>
          <select v-model="message" multiple>
            <option>The eldest brother liu bei</option>
            <option>Second brother guan yu</option>
            <option>Three elder brother zhang fei</option>
            <option>Four elder brother zhaoyun</option>
          </select>
        </div>`}); const vm = app.mount('#root');</script>

</html>
Copy the code

The results

Use V-for to overwrite select

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>const app = Vue.createApp({ data() { return { message: [], options: Options2: [{text: 'daddy-liu ', value:' daddy-Liu '},{text: 'second brother guan yu, value:' second brother guan yu '}, {text: 'third brother zhang fei, value:' third brother zhang fei '}, {text: 'four elder brother zhaoyun, value:' four elder brother zhaoyun}]}}, the template: `<div>
          {{ message }}
          <br/>
          <select v-model="message" multiple>
            <option v-for="item in options">{{item}}</option>
          </select>
          <! -- Array of objects -->
          <select v-model="message" multiple>
            <option v-for="item in options2" :value="item.value">{{item.text}}</option>
          </select>
        </div>`}); const vm = app.mount('#root');</script>

</html>
Copy the code

The results

Custom checkbox selection displays

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>Const app = vue.createApp ({data() {return {// Requirements: "Hello" if selected, "bye" message: 'bye'}} if not selected, template: '<div>
          {{ message }}
          <br/>
          <input type="checkbox" v-model="message" true-value="hello" false-value="bye" />
        </div>`}); const vm = app.mount('#root');</script>

</html>
Copy the code

The results

The lazy load modifier lazy

Binding takes effect when the input box loses focus

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'hello world'}},template: ` 
       

         {{ message }} 
        

 
         
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

The number modifier number

Convert the contents of the input field to number and store it in the bound property

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'hello world'
      }
    },
    template: `
        <div>
          {{ typeof message }}
          <br/>
          <input v-model.number="message" type="number" />
        </div>`}); const vm = app.mount('#root');</script>

</html>
Copy the code

The results

Remove the before and after whitespace modifier trim

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'hello world'}},template: ` 
       

         {{ message }} 
        

 
         
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results