Vue中如何使用v-model双向数据绑定select、checked等多种表单元素(vue中如何使用axios)

Vue中如何使用v-model双向数据绑定select、checked等多种表单元素

推荐整理分享Vue中如何使用v-model双向数据绑定select、checked等多种表单元素(vue中如何使用axios)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue中如何使用V-model完成千克与克之间的换算,vue中如何使用路由,vue中如何使用less,vue中如何使用rem布局,vue中如何使用ajax,vue中如何使用V-model完成千克与克之间的换算,vue中如何使用路由,vue中如何使用V-model完成千克与克之间的换算,内容如对您有帮助，希望把文章链接给更多的朋友！

 v-model 指令可以用在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

基础用法：

<div id="APP"><input type="text" v-model:value="tel" ><p>您的手机号：{{tel}}</p></div>const vm = new Vue({el: "#APP",data(){return {tel: 15503931234,}},});

注：当我们修改输入框里的内容时，下方的内容也会跟着变化。也就是说我们修改内容时，改变了 data 中的数据，data 中的数据变化后又重新渲染了 p 标签里的内容。

 v-model 与 v-bind 指令的区别：<div id="APP"><input type="text" :value="tel" ><p>您的手机号：{{tel}}</p></div>const vm = new Vue({el: "#APP",data(){return {tel: 15503931234,}},});

注：使用 v-bind 绑定数据，修改输入框里的内容时，下方的内容不会发生变化。也就是说我们修改内容时，不会改变 data 中的数据。

 Vue 中两种数据绑定方式的区别：

单向数据绑定 v-bind ：数据只能从 data 流向页面。

双向数据绑定 v-model ：数据不仅能从 data 流向页面，还可以从页面流向 data 。

 v-model 指令简写：

v-model:value 也可以简写为 v-model ，因为 v-model 默认收集的就是 value 值。

<div id="APP"><input type="text" v-model="tel" ><p>您的手机号：{{tel}}</p></div>const vm = new Vue({el: "#APP",data(){return {tel: 15503931234,}},});

注：双向数据绑定一般都应用在表单类元素上（如：input、select等）。

textarea 多行文本使用 v-model：<div id="APP"><textarea placeholder="请输入简介" v-model="content"></textarea><p>您的简介：{{content}}</p></div>const vm = new Vue({el: "#APP",data(){return {content: "",}},});

 单选按钮使用 v-model：<div id="APP"><label><input type="radio" value="男" v-model="sex"> 男</label><label><input type="radio" value="女" v-model="sex"> 女</label><p>您已选择：{{sex}}</p></div>const vm = new Vue({el: "#APP",data(){return {sex: "男",}},});

注：当选中时，sex 为 value 中的值。

单个复选框使用 v-model：<div id="APP"><input type="checkbox" v-model="status"><p>是否选中：{{status}}</p></div>const vm = new Vue({el: "#APP",data(){return {status: true,}},});

注：当选中时，status 为 true 。未选中时，status 为 false .

 单个复选框指定 v-model 选中值:<div id="APP"><input type="checkbox" v-model="status" true-value="同意" false-value="不同意"><p>您是否同意：{{status}}</p></div>const vm = new Vue({el: "#APP",data(){return {status: "同意",}},});

注：当选中时，status 为同意 。未选中时，status 为不同意 。

多个复选框使用 v-model:<div id="APP"><label><input type="checkbox" value="草莓" v-model="list"> 草莓</label><label><input type="checkbox" value="蓝莓" v-model="list"> 蓝莓</label><label><input type="checkbox" value="火龙果" v-model="list"> 火龙果</label><p>您已选择：{{list}}</p></div>const vm = new Vue({el: "#APP",data(){return {list: ["草莓"],}},});

注：多个复选框，需要绑定到同一个数组上 。选中的值，会自动添加到数组中。

select 单选时使用 v-model:<div id="APP"><select v-model="price"><option value="0">请选择</option><option value="200">草莓</option><option value="100">蓝莓</option><option value="150">火龙果</option></select><p>您需要支付：{{price}} 元</p></div>const vm = new Vue({el: "#APP",data(){return {price: 0,}},});

注：如果 v-model 表达式的初始值未能匹配任何选项，select 元素将被渲染为未选中状态。所以更推荐给 price 一个默认值。

 select 多选时使用 v-model:<div id="APP"><select v-model="list" multiple><option value="草莓">草莓</option><option value="蓝莓">蓝莓</option><option value="火龙果">火龙果</option><option value="香蕉">香蕉</option><option value="苹果">苹果</option></select><p>您已选择：{{list}}</p></div>const vm = new Vue({el: "#APP",data(){return {list: ["草莓","火龙果"],}},});

注：添加 multiple 属性后，按住 Ctrl 键再点击选项可以多选内容，多选时需要绑定到同一个数组上。

原创作者：吴小糖

创作时间：2023.2.28