<span>Message is: {{ message }}</span>
        <input type="text" v-model="message" placeholder="edit me">

        <script>

                // 给元素绑定class
                let vm = new Vue({
                    el : 'body',

                    data : {
                        // v-model 需要定义 否则第一次点击报错
                        message : ''
                    }
                });
                
        </script>

        // 如果很多元素需要绑定一个相同事件 可以绑定在最外层的元素上 v-on:change="checkboxValue" 
        // 必须给value值 否则选中一个元素将全部选中" 
        <div class="lizi2" v-on:change="checkboxValue">
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>
            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">John</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mike</label>
            <br>
            <span>Checked names: {{ checkedNames }}</span>
        </div>

        <script>

                let vm = new Vue({
                    el : 'body',

                    data : {
                        // 一组checkbox 变量值需要设置成数组 
                        // 否则选择一项 其他checkbox也会选上
                        checkedNames : []
                    },

                    methods : {
                        // 想要监听checkbox值的变化 需要用@change事件
                        // 其他事件监听的值是反的
                        checkboxValue (){
                            c(this.checkedNames);
                        }
                    }
                });

        </script>

        
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <br>
        <span>Picked: {{ picked }}</span>

        <script>

                let vm = new Vue({
                    el : 'body',

                    data : {
                        // 定义变量 否则第一次点击报错
                        // 不需要定义数组
                        picked : ''
                    }
                });

        </script>

        
        // value值确定选中后的值和选中第几项 如果不给默认是option的text内容值 
        <select v-model="selected">
            <option v-for="option in options" v-bind:value="option.value">
                {{ option.text }}
            </option>
        </select>
        <span>Selected : {{ selected }}</span>

        <script>

                let vm = new Vue({
                    el : 'body',

                    data : {
                        // 设置v-model的变量 选中哪个选项
                        selected : 'B',
                        options : [
                            {text : 'One', value : 'A'},
                            {text : 'Two', value : 'B'},
                            {text : 'Three', value : 'C'}
                        ]
                    }
                });

        </script>

        

        <input type="radio" v-model="pick" v-bind:value="radioValue1" />
        <input type="radio" v-model="pick" v-bind:value="radioValue2" />
        <span>{{pick | json}}</span>

        <script>

                let vm = new Vue({
                    el : 'body',

                    data : {
                        pick : '',
                        // 动态属性值 可以给任意值
                        // 这里需要在vue标签里 用json格式转换成字符串
                        radioValue1 : {a:1, b:2},
                        radioValue2 : 'radio'
                    }
                });

        </script>