<四>v-model 雙向繫結表單操作

阿新 • • 發佈：2021-12-11

v-model 用於表單控制元件的雙向繫結。實際上就是對html控制元件的value值進行操作的一個命令

作用於帶value的控制元件，比如input，selected，textarea等。

1、input(text) 、textarea

    <body>
      <div id="app">      
        <input type="text"v-model="message" placeholder="edit me">
        <p>Message is: {{ message }}</p>

      </div>
    <script src=" 
vue.js"></script>
    <script>
      var app = new Vue({
                          el: '#app',
                          data: {
                            message: '',
                          
                          },                 
                    });
   </script>

2、input(checkbox) 複選框

 <body>
      <div id="app">      
        <p>多個複選框：</p>
        <input type="checkbox" id="runoob" value="Runoob" v-model="messages">
        <label for="runoob">Runoob</label>
        <input type="checkbox" id="google" value="Google" v-model="messages">
        <label for 
="google">Google</label>
        <input type="checkbox" id="taobao" value="Taobao" v-model="messages">
        <label for="taobao">taobao</label>

        <p>checkMessage is: {{ messages }}</p>
      </div>
    <script src="vue.js"></script>
    <script>
      var app = new Vue({
                          el: '#app',
                          data: {
                            messages: [],
                          
                          },                 
                    });
   </script>

3、input(radio) 單選按鈕

<body>
      <div id="app">     
        <input type="radio" id="runoob" value="Runoob" v-model="messages">
        <label for="runoob">Runoob</label>
        <input type="radio" id="google" value="Google" v-model="messages">
        <label for="google">Google</label>
        <input type="radio" id="taobao" value="Taobao" v-model="messages">
        <label for="taobao">taobao</label>

        <p>checkMessage is: {{ messages }}</p>
      </div>
    <script src="vue.js"></script>
    <script>
      var app = new Vue({
                          el: '#app',
                          data: {
                            messages: 'Taobao',
                          
                          },                 
                    });
   </script>

4、selected 下拉框

  <body>
      <div id="app">          
          <select v-model="selected">
            <option disabled value="">請選擇</option>
            <option value ='a'>A</option> 
            <option value='b'>B</option>
            <option value='c'>C</option>
          </select>
          <span>Selected: {{ selected }}</span>     
      </div>
    <script src="vue.js"></script>
    <script>
      var app = new Vue({
                          el: '#app',
                          data: {
                            selected: 'a',
                          
                          },                 
                    });
   </script>

5、繫結修飾符

    <body>
      <div id="app">          
         <input v-model.lazy="msg">   <!-- //從實時觸發變成change時同步，即焦點離開此控制元件時觸發 -->
        <input v-model.number="age" type="number">   <!--  //將變數轉成數字型，如果轉換失敗，則返回原來的值 -->
        <input v-model.trim="msg">   
        <p>  {{msg}}</p>
      </div>
    
    <script src="vue.js"></script>
    <script>
      var app = new Vue({
                          el: '#app',
                          data: {
                            msg: '',
                            age:1,
                          },                 
                    });
   </script>