Vue.js 表单控件

表单控件

使用v-model实现数据的双向绑定,下面简单演示一下v-model的用法

• text

<div id="demo">
        <input type="text" v-model='message'>
        <p>You input is:  {{message}}</p>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:'#demo',
            data:{
                message:''
            },
            updated:function(){
                console.log(this.message);
            }
        });
    </script>

• vedio

    <div id="demo">
        <label><input type="radio" value="male" v-model='sex'>male</label>
        <label><input type="radio" value="famale" v-model='sex'>famale</label>
        <p>You sex is: {{sex}}</p>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:'#demo',
            data:{
                sex:''
            },
            updated:function(){
                console.log(this.sex);
            }
        });
    </script>

• checkbox

  1. 单选checkbox

          <div id="demo">
         <label><input type="checkbox" v-model='isCheckOrNot'>Cheakbox</label>
         <p>The checkbox status is: {{isCheckOrNot}}</p>
     </div>
     <script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
     <script>
         var vm = new Vue({
             el:'#demo',
             data:{
                 isCheckOrNot:""
             },
             updated:function(){
                 console.log(this.isCheckOrNot);
             }
         });
     </script>   

  2. 多选checkbox

         <div id="demo">
         <label><input type="checkbox" value="Cheakbox1" v-model='CheckBoxs'>Cheakbox1</label> 
         <label><input type="checkbox" value="Cheakbox2"  v-model='CheckBoxs'>Cheakbox2</label> 
         <label><input type="checkbox" value="Cheakbox3"  v-model='CheckBoxs'>Cheakbox3</label> 
         <label><input type="checkbox" value="Cheakbox4"  v-model='CheckBoxs'>Cheakbox4</label> 
         <label><input type="checkbox" value="Cheakbox5"  v-model='CheckBoxs'>Cheakbox5</label>
         <p>You check  checkbox are: {{CheckBoxs.join('--')}}</p>
     </div>
     <script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
     <script>
         var vm = new Vue({
             el:'#demo',
             data:{
                 CheckBoxs:[]
             },
             updated:function(){
                 console.log(this.CheckBoxs);
             }
         });
     </script>

• select

  1. 单选select

         <div id="demo">
         <select v-model="select">
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
             <option value="5">5</option>
         </select>
         <p>You select is : {{select}}</p>
     </div>
     <script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
     <script>
         var vm = new Vue({
             el:'#demo',
             data:{
                 select:''
             },
             updated:function(){
                 console.log(this.select);
             }
         });
     </script>    

  2. 多选select

     <div id="demo">
         <select v-model="selects" multiple='multiple'>
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
             <option value="5">5</option>
         </select>
         <p>You select is : {{selects.join('--')}}</p>
     </div>
     <script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
     <script>
         var vm = new Vue({
             el:'#demo',
             data:{
                 selects:[]
             },
             updated:function(){
                 console.log(this.selects);
             }
         });
     </script>