如何利用Vue.js库中的v-model绑定表单中的数据

JavaScript057

如何利用Vue.js库中的v-model绑定表单中的数据,第1张

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>

解决办法:

需要在input.value赋值后,手动触发input事件

样例:<input type="text" id="search_text" v-model="item.Content"/>

("#search_text")[0].dispatchEvent(new Event('input'))//dom元素