vue.js使用v-model指令實(shí)現(xiàn)的數(shù)據(jù)雙向綁定功能示例

2019-11-19 13:48:15

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了vue.js使用v-model指令實(shí)現(xiàn)的數(shù)據(jù)雙向綁定功能。分享給大家供大家參考，具體如下：

vue.js的一大功能便是實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，本文就表單處理時(shí)運(yùn)用v-model指令實(shí)現(xiàn)雙向綁定做一個(gè)介紹：

v-model這個(gè)指令只能用在<input>, <select>,<textarea>這些表單元素上，所謂雙向綁定，指的就是我們?cè)趈s中的vue實(shí)例中的data與其渲染的dom元素上的內(nèi)容保持一致，兩者無論誰被改變，另一方也會(huì)相應(yīng)的更新為相同的數(shù)據(jù)。這是通過設(shè)置屬性訪問器實(shí)現(xiàn)的。例如：

app.html

<!doctype html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <title>  vuejs v-model 數(shù)據(jù)雙向綁定  </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">醫(yī)生</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代碼運(yùn)行工具http://tools.VeVB.COm/code/HtmlJsRun測(cè)試運(yùn)行效果如下：