脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue v-model双向数据绑定

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

 更新时间：2023年10月11日 10:28:37   作者：小吴吴吴呀  
 v-model 指令可以用在表单 input、textarea 及 select 元素上创建双向数据绑定,它会根据控件类型自动选取正确的方法来更新元素,本文给大家介绍Vue中如何使用v-model双向数据绑定select、checked等多种表单元素,感兴趣的朋友一起看看吧

 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 键再点击选项可以多选内容，多选时需要绑定到同一个数组上。

到此这篇关于Vue中如何使用v-model双向数据绑定select、checked等多种表单元素的文章就介绍到这了,更多相关Vue v-model双向数据绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 详解Vue中如何进行分布式日志管理与日志分析

    详解Vue中如何进行分布式日志管理与日志分析

    在现代应用程序中，日志是一项重要的功能，用于帮助开发人员和运维人员了解应用程序的行为并进行故障排除，本文将介绍如何在Vue应用程序中实现分布式日志管理和日志分析功能，感兴趣的可以了解一下
    2023-06-06
  • Vue修改页面标签的方法示例

    Vue修改页面标签的方法示例

    vue项目有时候需要根据页面需要动态的去修改页面标题名称，本文就来介绍一下，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • vue loadmore组件上拉加载更多功能示例代码

    vue loadmore组件上拉加载更多功能示例代码

    这篇文章主要介绍了vue loadmore组件上拉加载更多功能示例代码,需要的朋友可以参考下
    2017-07-07
  • vue中如何使用vue-baberrage生成弹幕

    vue中如何使用vue-baberrage生成弹幕

    这篇文章主要介绍了vue中如何使用vue-baberrage生成弹幕，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • vue实现简单加法计算器

    vue实现简单加法计算器

    这篇文章主要为大家详细介绍了vue实现简单加法计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-10-10
  • animate.css在vue项目中的使用教程

    animate.css在vue项目中的使用教程

    在vue项目中使用动画其实有多种方式，可以使用vue中的过渡transition，可以使用animate动画与transition配合使用，也可以单独使用animate动画库，下面我们开始介绍在vue中单独使用animate动画，感兴趣的朋友一起看看吧
    2018-08-08
  • vite+vue3使用@路径报错处理

    vite+vue3使用@路径报错处理

    本文主要介绍了vite+vue3使用@路径报错处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-11-11
  • element-ui使用导航栏跳转路由的用法详解

    element-ui使用导航栏跳转路由的用法详解

    今天小编就为大家分享一篇element-ui使用导航栏跳转路由的用法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 解决vue项目中前后端交互的跨域问题、nginx代理配置方式

    解决vue项目中前后端交互的跨域问题、nginx代理配置方式

    这篇文章主要介绍了解决vue项目中前后端交互的跨域问题、nginx代理配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • Vue如何清空对象

    Vue如何清空对象

    这篇文章主要介绍了Vue如何清空对象，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-03-03

最新评论