12- v-model 表單綁定

<body>
    <div id="box">
        <input type="text" v-model="mytext">
        {{mytext}}
        <textarea v-model="mytext" ></textarea>

        <h2>多選</h2>
        <input type="checkbox" v-model="checkGroup" value="vue">vue
        <input type="checkbox" v-model="checkGroup" value="react">react
        <input type="checkbox"v-model="checkGroup" value="jquery">jquery
        <button  @click="handleClick()">提交</button >


        <!-- <h2>記住用戶(hù)名</h2>
        <input type="checkbox" v-model="arr" value="aaaa">記住用戶(hù)名
        <button  @click="handlrLogin()">登錄</button> -->
        
        <h2>記住用戶(hù)名   如果只對(duì)于一個(gè)綁定,綁定布爾值就可以了</h2>
        <input type="checkbox" v-model="isRem" value="aaaa">記住用戶(hù)名
        <button  @click="handlrLogin()">登錄</button> 

        
        <h2>單選</h2>
        <!-- v-model 不能使用數(shù)組,也不能使用布爾值,所以使用字符串 -->
        <input type="radio" v-model="favlang" value="vue" name="fav">vue
        <input type="radio" v-model="favlang" value="react" name="fav">react
        <input type="radio"v-model="favlang" value="jquery" name="fav">jquery
        <button  @click="handleSelect()">提交</button >

    </div>
    <script>
        var vm =new Vue({
            el:'#box',
            data:{
                mytext:'',
                checkGroup:[],
                // arr:[]
                isRem:false,
                favlang:'vue'
            },
            methods:{
                handleClick(){
                    console.log('提交',this.checkGroup)
                },
                handlrLogin(){
                    console.log("登錄",this.isRem)
                },
                handleSelect(){
                    console.log("單選",this.favlang)
                }
            }
        })
    </script>
</body>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容