如何利用Vue.js库中的v-model绑定表单中的数据
展开全部
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"/>
<label for="man">男</label>
<input type="radio" id="two" value="Two" v-model="data.sex"/>
<label for="male">女</label>
<br />
<input type="checkbox" id="jack" value="book" v-model="data.interest"/>
<label for="jack">阅读</label>
<input type="checkbox" id="john" value="swim" v-model="data.interest"/>
<label for="john">游泳</label>
<input type="checkbox" id="move" value="game" v-model="data.interest"/>
<label for="move">游戏</label>
<input type="checkbox" id="mike" value="song" v-model="data.interest"/>
<label for="mike">唱歌</label>
<br />
身份：
<select v-model="data.identity">
<option value="teacher" selected>教师</option>
<option value="doctor">医生</option>
<option value="lawyer">律师</option>
</select>
</form>
<p><pre>data: {{$data | json 2}}</pre></p>
</div>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
第一步，创建静态HTML5页面vmodel.html，并引入vue.min.js文件
第二步，在body元素内插入一个div，并在div中引入input输入框和label标签
第三步，调用初始化Vue.js的方法，并给输入框赋值
第四步，预览该静态页面，页面显示出默认显示的值
第五步，减少输入框中的字符，发现下面内容也跟着减少
第六步，添加输入框中的字符，下面的内容也随之增加，这就展示了数据双向绑定
第二步，在body元素内插入一个div，并在div中引入input输入框和label标签
第三步，调用初始化Vue.js的方法，并给输入框赋值
第四步，预览该静态页面，页面显示出默认显示的值
第五步，减少输入框中的字符，发现下面内容也跟着减少
第六步，添加输入框中的字符，下面的内容也随之增加，这就展示了数据双向绑定
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
