如何利用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>

温馨提示:答案为网友推荐,仅供参考
第1个回答  2018-07-05
第一步,创建静态HTML5页面vmodel.html,并引入vue.min.js文件

第二步,在body元素内插入一个div,并在div中引入input输入框和label标签

第三步,调用初始化Vue.js的方法,并给输入框赋值

第四步,预览该静态页面,页面显示出默认显示的值

第五步,减少输入框中的字符,发现下面内容也跟着减少

第六步,添加输入框中的字符,下面的内容也随之增加,这就展示了数据双向绑定本回答被网友采纳
相似回答