vue.js v-model数据双向绑定实例

最新推荐文章于 2024-07-02 10:28:56 发布

爱代码也爱生活

最新推荐文章于 2024-07-02 10:28:56 发布

阅读量5.8k

点赞数

分类专栏： web前端 vue.js

本文链接：https://blog.csdn.net/nuli888/article/details/70920172

版权

本文详细介绍了Vue.js中的v-model指令如何在表单处理中实现数据的双向绑定，通过设置属性访问器确保JavaScript实例数据与DOM元素同步更新。

摘要由CSDN通过智能技术生成

vue.js的一大功能便是实现数据的双向绑定，本文就表单处理时运用v-model指令实现双向绑定做一个介绍：

v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。这是通过设置属性访问器实现的。例如：

app.html

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
	<title>
	vuejs 过滤器、ajax数据、嵌套循环、if判断、事件监听
	</title>
	<style type="text/css">
		[v-cloak] { display: none }
	</style>
</head>

<body>
   <div id="app">
		<form>
            姓名：
			<input type="text" v-model="data.name" placeholder="姓名"/>
			<br />
			性别：
			<input type="radio" id="one" value="One" v-model="data.sex"/>
			<

最低0.47元/天解锁文章

爱代码也爱生活

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
vue.js v-model数据双向绑定实例

vue.js的一大功能便是实现数据的双向绑定，本文就表单处理时运用v-model指令实现双向绑定做一个介绍：v-model这个指令只能用在, ,这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。这是通过设置属性访问器实现的。例如：app.html
复制链接

扫一扫

专栏目录