Vue基础之表单应用

一，可以用 v-model 指令在表单控件元素上创建双向数据绑定

    案例1：

 <div id="app">
        <p>input 元素：</p>
        <input v-model = "message" placeholder="编辑……">
        <p >消息是: {{message}}</p>
            
        <p>textarea 元素：</p>
        <p style="white-space: pre">{{messageTwo}}</p>
        <textarea v-model ="messageTwo" placeholder="输入……"></textarea>
    </div>


    <script>

        var vm = new Vue({
            el: '#app',
            data:{
                message:'你好吗 哈哈哈哈',
                messageTwo:'我很好 好久不见 嘻嘻嘻'
            }
        })

    </script>

  

  二，复选框：如果是一个为逻辑值，如果是多个则绑定到同一个数组

        案例：

<div id="app">
        <p>单个复选框：</p>
        <input type="checkbox" id="checkbox" v-model="message">
        <label for="checkbox">{{message}}</label>

        <p>多个复选框：</p>
        <input type="checkbox" id="white_cat" value="white_cat" v-model="checkedCat">
        <label for="white_cat">小白猫</label>
        <input type="checkbox" id="black_cat" value="black_cat" v-model="checkedCat">
        <label for="black_cat">小黑猫</label>
        <input type="checkbox" id="calico" value="calico" v-model="checkedCat">
        <label for="calico">小花猫</label>
        <br>
        <span>选择的猫猫为: {{checkedCat}}</span>
    </div>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                message: true,
                checkedCat: []
            }

        })

    </script>

  三，单选按钮：

       案例：

 <div id="app">
        <input type="radio" id="black_cat" value="black_cat" v-model="cat">
        <label for="小白猫">小白猫</label>
        <input type="radio" id="white_cat" value="white_cat" v-model="cat">
        <label for="小黑猫">小黑猫</label>
        <br>
        <span>选择的值为: {{cat}}</span>
    </div>
    <script>
        
        var vm = new Vue({
            el: '#app',
            data: {
                cat: 'runoob'
            }

        })

    </script>

 

 四，select 列表：

    下拉列表的双向数据绑定案例：

<div id="app">
        <select v-model="selected" name="fruit">
            <option value="">选择一个城市</option>
            <option value="北京欢迎你">北京</option>
            <option value="上海欢迎你">上海</option>
            <option value="广州欢迎你">广州</option>
          </select>
          <div id="cityname">您选择的城市是：{{selected}}</div>
    </div>
    <script>
        
        var vm = new Vue({
            el: '#app',
            data: {
                selected:''
            }

        })
        
    </script>

 

  案例一：实现城市联动：

 <div id="app">
        省份：
        <select  v-model="province">
            <option selected="selected">
                请选择
            </option>
            <option  v-for="p in province_list">
                {{p}}
            </option>
        </select>
        城市：
        <select  v-model="city">
            <option selected="selected">
                请选择
            </option>
            <option  v-for="c in city_list">
                {{c}}
            </option>
        </select>

    </div>
   <script>

        var vm = new Vue({
            
            el: '#app',
            data: {
                province: '请选择',
                city: '请选择',
                province_list: ['北京', '广东'],
                city_list: [],
                area: [
                    {
                        name: '北京',
                        id: 1,
                        child: ['北京']
                    },
                    {
                        name: '广东',
                        id: 2,
                        child: ['广州', '深圳', '东莞']
                    }
                ]
            },
            watch:{
                province:function(nval,oval){
                    var self = this;
                    var cityList = [];
                    if(nval == '请选择'){
                        this.city_list = []
                    }
                    if(nval != oval){
                        for (var i=0;i<self.area.length;i++){
                            if(self.area[i].name == nval){
                                cityList = self.area[i].child;
                            }
                        }
                        this.city= '请选择';
                        this.city_list = cityList;
                    }
                }
            }


        })

    </script>

案例二：实现全选反选：

<div id="app">
        <p>全选：</p>
        <input type="checkbox" id="checkbox" v-model="checked" @change ="checkedAll()">
        <label for="checkbox">{{checked}}</label>
        <br>
        <input type="checkbox" id="white_cat" value="white_cat" v-model="checkedCat">
        <label for="white_cat">小白猫</label>
        <input type="checkbox" id="black_cat" value="black_cat" v-model="checkedCat">
        <label for="black_cat">小黑猫</label>
        <input type="checkbox" id="calico" value="calico" v-model="checkedCat">
        <label for="calico">小花猫</label>
        <br>
        <span>选择的猫猫为: {{checkedCat}}</span>
    </div>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                checked: false,
                checkedCat: [],
                checkedArr: ["white_cat", "black_cat", "calico"]
            },
            methods:{
                checkedAll:function(){
                    if(this.checked){
                        this.checkedCat = this.checkedArr;
                    }else{
                        this.checkedCat = [];
                    }
                }
            },
            watch:{
                "checkedCat":function(){
                    if(this.checkedCat.length == this.checkedArr.length){
                        this.checked = true;
                    }else{
                        this.checked =false;
                    }
                }
            }
        })

    </script>

 

案例三：实现表单输入显示提交：

 <div id="app" >
        <label for="username">昵称：</label>
        <input type="text" id="username" v-model ="username">
        <br>
        <label for="age">年龄：</label>
        <input type="number" id="age"  v-model ="age">
        <br>
        <label for="checkbox">单身：</label>
        <input type="checkbox" id="checkbox" v-model ="checked">
        <label for="checkbox">{{checked}}</label>
        <br>
        <label>喜欢：</label>
        <input type="checkbox" id="white_cat" value="white_cat" v-model="checkedCat">
        <label for="white_cat">小白猫</label>
        <input type="checkbox" id="black_cat" value="black_cat" v-model="checkedCat">
        <label for="black_cat">小黑猫</label>
        <input type="checkbox" id="calico" value="calico" v-model="checkedCat">
        <label for="calico">小花猫</label>
        <br>
        <input type="submit" @click ="submit()"/>
        <br/>
        <br/>
        <span>昵称: {{ username }}</span>
        <br>
        <span>年龄: {{ age }}</span>
        <br>
        <span>单身: {{ checked }}</span>
        <br>
        <span>喜欢: {{ checkedCat }}</span>
        <br>
        
    </div>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                username:'username',
                age:28,
                checked: false,
                checkedCat: ["white_cat"]
            },
            methods: {
               submit:function(){
                   var params = new Object();
                   params.name = this.username;
                   params.age = this.age;
                   params.checked = this.checked;
                   params.checkedCat=this.checkedCat;
                   document.write("fromData:" + JSON.stringify(params))
               }
            }
        })

    </script>