Vue学习：v-model绑定文本框、单选按钮、下拉菜单、复选框等

v-model 指令可以在组件上使用以实现双向绑定，之前学习过 v -model 绑定文本框和下拉菜单，今天把表单的几个控件单选按钮 radio、复选框 checkbox、多行文本框 textarea 都试着绑定了一下。

一、单行文本框和多行文本框

p>1. 单行文本框p>
用户名:input type="text" v-model="inputMessage">
p>您的用户名是：{{inputMessage}}p>
p>2. 多行文本框p>
textarea v-model="textMessage" placeholder="请留言" rows="4" cols="80">textarea>
p>您的留言是：{{textMessage}}p>

script type="text/javascript">
    const RootComp = {          
        data() {
            return {
                inputMessage: '',
                textMessage: '',
            }
        }
    }
    const vueApp = Vue.createApp(RootComp)   
    const vm = vueApp.mount("#app")             
    console.log(vm.$data.inputMessage)          
/script>

运行效果如下。

二、单选按钮和下拉菜单

p>3. 单选按钮p>
input type="radio" name="certificate" value="高" v-model="level"> 高级
input type="radio" name="certificate" value="中" v-model="level"> 中级
input type="radio" name="certificate" value="初" v-model="level"> 初级
p>证书级别是：{{level}}p>
p>4. 下拉菜单p>
 所在城市：select v-model="city">
   option value="">请选择option>
   option value="beijing">北京option>
   option value="shanghai">上海option>
   option value="guangzhou">广州option>
   option value="shenzhen">深圳option>
 select>
 p>所在城市是：{{city}}p>

script type="text/javascript">
    const RootComp = {          
        data() {
            return {
                level: '高',
                city: '',
            }
        }
    }
    const vueApp = Vue.createApp(RootComp)   
    const vm = vueApp.mount("#app")             
    console.log(vm.$data.inputMessage)          
/script>

运行效果如下。

三、复选框

p>5-1. 复选框p>
        div>
            字节跳动：input type="checkbox" v-model="byteDance" value="抖音 "> 抖音
            input type="checkbox" v-model="byteDance" value="西瓜视频 "> 西瓜视频
            input type="checkbox" v-model="byteDance" value="今日头条 "> 今日头条
            p>选中的复选框数量：{{byteDance.length}}p>
            p>选中的复选框项：{{byteDance}}p>
        div>
        p>5-2. 复选框 (使用 v-for) 生成复选框p>
        div>
            业余爱好：label v-for="item in checks" :key="item.id">
                input type="checkbox" v-model="checkOptions" :value="item.name">
                {{item.name}}
            label>
            p>选中的复选框数量：{{checkOptions.length}}p>
            p>选中的复选框项：{{checkOptions}}p>
        div>

script type="text/javascript">
    const RootComp = {          
        data() {
            return {
                byteDance:[],
                checks: [
                    { id: 1, name: '游泳' },
                    { id: 2, name: '网球' },
                    { id: 3, name: '滑板' }
                ],
                checkOptions: [],
            }
        }
    }
    const vueApp = Vue.createApp(RootComp)   
    const vm = vueApp.mount("#app")             
    console.log(vm.$data.inputMessage)          
/script>

运行效果如下。

完整代码如下：

DOCTYPE html>
html>

head>
    meta charset="utf-8">
    title>v-model 绑定 input、textarea、radio、select、checkboxtitle>
    
    script src="https://unpkg.com/vue@3/dist/vue.global.js">script>
head>

body>
    div id="app"> 
        p>1. 单行文本框p>
        用户名:input type="text" v-model="inputMessage">
        p>您的用户名是：{{inputMessage}}p>
        p>2. 多行文本框p>
        textarea v-model="textMessage" placeholder="请留言" rows="4" cols="80">textarea>
        p>您的留言是：{{textMessage}}p>
        p>3. 单选按钮p>
        input type="radio" name="certificate" value="高" v-model="level"> 高级
        input type="radio" name="certificate" value="中" v-model="level"> 中级
        input type="radio" name="certificate" value="初" v-model="level"> 初级
        p>证书级别是：{{level}}p>
        p>4. 下拉菜单p>
        所在城市：select v-model="city">
            option value="">请选择option>
            option value="beijing">北京option>
            option value="shanghai">上海option>
            option value="guangzhou">广州option>
            option value="shenzhen">深圳option>
        select>
        p>所在城市是：{{city}}p>
        p>5-1. 复选框p>
        div>
            字节跳动：input type="checkbox" v-model="byteDance" value="抖音 "> 抖音
            input type="checkbox" v-model="byteDance" value="西瓜视频 "> 西瓜视频
            input type="checkbox" v-model="byteDance" value="今日头条 "> 今日头条
            p>选中的复选框数量：{{byteDance.length}}p>
            p>选中的复选框项：{{byteDance}}p>
        div>
        p>5-2. 复选框 (使用 v-for) 生成复选框p>
        div>
            业余爱好：label v-for="item in checks" :key="item.id">
                input type="checkbox" v-model="checkOptions" :value="item.name">
                {{item.name}}
            label>
            p>选中的复选框数量：{{checkOptions.length}}p>
            p>选中的复选框项：{{checkOptions}}p>
        div>
    div>
body>

script type="text/javascript">
    const RootComp = {          
        data() {
            return {
                inputMessage: '',
                textMessage: '',
                level: '高',
                city: '',
                byteDance:[],
                checks: [
                    { id: 1, name: '游泳' },
                    { id: 2, name: '网球' },
                    { id: 3, name: '滑板' }
                ],
                checkOptions: [],
            }
        }
    }
    const vueApp = Vue.createApp(RootComp)   
    const vm = vueApp.mount("#app")          
    console.log(vm.$data.inputMessage)       
script>

html>