vue.js使用v-model指令实现的数据双向绑定功能示例

2019-11-19 13:48:15

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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 v-model 数据双向绑定  </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><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" charset="utf-8"></script><script src="https://cdn.bootcss.com/vue/2.3.0/vue.min.js" charset="utf-8"></script><script type="text/javascript">$(function() {  new Vue({    el: '#app',    data: {      data:{        name:'',        sex:'',        interest:[],        identity:''      }    }  })})</script></html>

使用本站在线HTML/CSS/JavaScript代码运行工具http://tools.VeVB.COm/code/HtmlJsRun测试运行效果如下：