【Vue.js】Vue官方文档学习-表单input绑定_el-input type="textarea-优快云博客

本文链接：https://blog.youkuaiyun.com/joseydon/article/details/81346857

这篇博客介绍了Vue.js的v-model指令在表单元素如单行文本、多行文本、checkbox（单选与多选）、radio及select中的应用，阐述了如何实现双向数据绑定，并指出v-model会忽略初始属性值，以Vue实例的data为数据源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-model指令：

在表单 input 和 textarea 元素上创建双向数据绑定。
根据 input 的 type 类型自动地以正确的方式更新元素。
会忽略所有表单元素中 value, checked 或 selected 属性上初始设置的值。
将 Vue 实例中的 data 作为真实数据来源。

单行文本

    <div id="app1">
        <input v-model="message" placeholder="编辑">
        <p>message是：{{ message }}</p>
    </div>

    //  单行文本
    var app1 = new Vue({
        el:'#app1',
        data:{
            message:null
        }
    })

多行文本

    <div id="app2">
        <span>多行文本message是：</span>
        <p style="white-space: pre-line;">{{ message }}</p>
        <textarea v-model="message" placeholder="编辑"></textarea>
    </div>
        //  多行文本
    var app2 = new Vue({
        el:'#app2',
        data:{
            message:null
        }
    })

在 textarea 中插值（< textarea >{{text}}）并不会生效。

checkbox

单选checkbox

    <div id="app3">
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
    </div>
        //  单选checkbox
    var app3 = new Vue({
        el:"#app3",
        data:{
            checked:false
        }
    })

多选checkbox

    <div id="app4">
        <input type="checkbox" id="A" value="A" v-model="checkboxNames">
        <label for="A">A</label>
        <input type="checkbox" id="B" value="B" v-model="checkboxNames">
        <label for="B">B</label>
        <input type="checkbox" id="C" value="C" v-model="checkboxNames">
        <label for="C">C</label>
        <br>
        <span>被选中的是：{{ checkboxNames }}</span>
    </div>
        //  多选checkbox
    var app4 = new Vue({
        el:"#app4",
        data:{
            checkboxNames:[]
        }
    })

radio

    <div id="app5">
        <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 }}</span>
    </div>
        //  radio
    var app5 = new Vue({
        el:"#app5",
        data:{
            picked:null
        }
    })

select

    <div id="app6">
        <select v-model="selected">
            <option value="" disabled="">请从以下选项中选择：</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <br>
        <span>选中的是：{{ selected }}</span>
    </div>
        //  select
    var app6 = new Vue({
        el:"#app6",
        data:{
            selected:null
        }
    })