VUE3(九)v-model

绑定其它表单

    <template id="my-app">
        <!-- 1.绑定textarea -->
        <label for="intro">
            自我介绍
            <textarea name="intro" id="intro" cols="30" rows="10" v-model="intro"></textarea>
        </label>
        <h2>intro:{{intro}}</h2>

        <!-- 2.1.checkbox -->
        <label for="agree">
            <input type="checkbox" id="agree" v-model="isAgree"> 同意协议
        </label>
        <h2>isAgree:{{isAgree}}</h2>
       
        <!-- 2.2.多选框 -->
        <span>你的爱好</span>
        <label for="basketball">
            <input type="checkbox" id="basketball" value="basketball" v-model="hobbies"> 篮球
        </label>
        <label for="football">
            <input type="checkbox" id="football" value="football" v-model="hobbies"> 足球
        </label>
        <label for="tennis">
            <input type="checkbox" id="tennis" value="tennis" v-model="hobbies"> 网球
        </label>
        <h2>hobbies:{{hobbies}}</h2>

        <!-- 3.radio -->
        <span>你的性别</span>
        <!-- v-model绑定到同一个属性上时会自动互斥选择 -->
        <label for="male">
            <input type="radio" id="male" value="male" v-model="gender"> 男
        </label>
        <label for="female">
            <input type="radio" id="female" value="female" v-model="gender"> 女
        </label>
        <h2>gender:{{gender}}</h2>

        <!-- 4.select -->
        <span>喜欢的水果</span>
        <select v-model="fruit" multiple size="2">
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
            <option value="banana">香蕉</option>
        </select>
        <h2>fruit:{{fruit}}</h2>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        const app={
            template:"#my-app",
            data(){
                return{
                    intro: "hello world",
                    isAgree: false,
                    hobbies: [],
                    gender: "male",
                    fruit: "apple"
                }
            }
        };
        Vue.createApp(app).mount("#app");
    </script>

发表评论