<div id = "app1">
     <div>
        请输入你喜欢的城市<input type="text" v-model="cname">
        <p>
            你选择的城市:{{cname}}
        </p>
    </div>
    <div>
        回复评论: <input type="text" v-model="huifu">
        <p>
            你选回复是:{{huifu}}
        </p>
    </div>

</div>
    <script>
        var app = new Vue({
        el:'#app1',
        data : {
            cname : "哈哈哈尔滨市",
            huifu : "我叫史迪奇",
        }
    });
    </script>

<div id = "app2">
     <div>
        <span>你的名字: </span>
        <p style="white-space: pre-line;">{{ name }}</p>
        <br>
        <textarea v-model="name " placeholder="请输入你的名字"></textarea>

        <p>
            你的名字:{{name}}
        </p>
    </div>

</div>
    <script>
        var app = new Vue({
        el:'#app2',
        data : {
            name : "史迪奇",
        }
    });
    </script>

<div id = "app3">
    <div>
        <p>
            你的选择是: {{checked }}
        </p>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>        
    </div>
</div>
    <script>
        var app = new Vue({
        el:'#app3',
        data : {
            checked : false,
        }
    });
    </script>

<div id = "app4">
    <div>
        <input type="checkbox" id="blue" value="蓝色" v-model="color">
        <label for="blue">蓝色</label>
        <input type="checkbox" id="red" value="红色" v-model="color">
        <label for="red">红色</label>
        <input type="checkbox" id="yellow" value="黄色" v-model="color">
        <label for="yellow">黄色</label>
        <p>
            你选择的颜色是: {{color}}
        </p>
    </div>
</div>
    <script>
        var app = new Vue({
        el:'#app4',
        data : {
            color : [],
        }
    });
    </script>

<div id = "app5">
        <div>
            <input type="radio" id="男" value="男" v-model="sex">
            <label for="男">男</label>
            <br>
            <input type="radio" id="女" value="女" v-model="sex">
            <label for="女">女</label>
            <p>
                你选择的性别是: {{sex}}
            </p>
        </div>
</div>
    <script>
        var app = new Vue({
        el:'#app5',
        data : {
            sex :[]
        }
    });
    </script>

<div id = "app6">
        <div>
            请你选择你喜欢的季节:<select v-model="season" style="width: 50px;">
                <option>春天</option>
                <option>夏天</option>
                <option>秋天</option>
                <option>冬天</option>
            </select>
        
        <p>
            你喜欢的季节是: {{season}}
        </p>
        </div>
    </div>
    <script>
        var app = new Vue({
        el:'#app6',
        data : {
            season: "夏天",
        }
    });
    </script>

<div id = "app7">
        <div>请你选择你喜欢的季节:
        <select v-model="selected"  multiple style="width: 50px;">
            <option>春天</option>
            <option>夏天</option>
            <option>秋天</option>
            <option>冬天</option>
          </select>
          <p>
            你喜欢的季节是:{{selected}}
            <br>
            多选时按住, 往下拖
          </p>
        </div>
</div>
    <script>
        var app = new Vue({
        el:'#app7',
        data : {
            selected:["夏天","冬天"]
        }
    });
    </script>