<四>v-model 双向绑定表单操作

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>

 

posted @ 2021-12-11 18:46  许轩霖  阅读(77)  评论(0)    收藏  举报