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

更新時(shí)間：2018年05月22日 09:19:35 作者：愛(ài)代碼也愛(ài)生活

這篇文章主要介紹了vue.js使用v-model指令實(shí)現(xiàn)的數(shù)據(jù)雙向綁定功能,簡(jiǎn)單分析了v-model指令的功能并結(jié)合實(shí)例形式給出了v-model指令實(shí)現(xiàn)數(shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下

本文實(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)容保持一致，兩者無(wú)論誰(shuí)被改變，另一方也會(huì)相應(yīng)的更新為相同的數(shù)據(jù)。這是通過(guò)設(shè)置屬性訪問(wèn)器實(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.jb51.net/code/HtmlJsRun測(cè)試運(yùn)行效果如下：

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Vue3?實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能(刷新保持狀態(tài))
倒計(jì)時(shí)的運(yùn)用場(chǎng)景是需要經(jīng)常用到的，但是根據(jù)業(yè)務(wù)的不同，好比手機(jī)驗(yàn)證碼或者是郵箱驗(yàn)證碼之類的，即使用戶跳轉(zhuǎn)到其它頁(yè)面或者刷新，再次回到登錄也，驗(yàn)證碼的倒計(jì)時(shí)也得保持狀態(tài),下面通過(guò)本文給大家分享Vue3?驗(yàn)證碼倒計(jì)時(shí)功能實(shí)現(xiàn)，感興趣的朋友一起看看吧
2022-08-08
使用Vue指令實(shí)現(xiàn)Markdown渲染和代碼高亮
在前端開(kāi)發(fā)中,我們經(jīng)常需要將Markdown格式的文本渲染成HTML并展示在頁(yè)面上,同時(shí)還希望能夠?qū)Υa塊進(jìn)行高亮顯示,今天我將分享一段代碼,通過(guò)Vue指令實(shí)現(xiàn)了這個(gè)功能,需要的朋友可以參考下
2023-09-09
Vue3中注冊(cè)全局的組件,并在TS中添加全局組件提示方式
這篇文章主要介紹了Vue3中注冊(cè)全局的組件,并在TS中添加全局組件提示方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
解決Vuepress碼云部署及自動(dòng)跳轉(zhuǎn)404的問(wèn)題
這篇文章主要介紹了解決Vuepress碼云部署及自動(dòng)跳轉(zhuǎn)404的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vuedraggable+element ui實(shí)現(xiàn)頁(yè)面控件拖拽排序效果
這篇文章主要為大家詳細(xì)介紹了vuedraggable+element ui實(shí)現(xiàn)頁(yè)面控件拖拽排序效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-12-12
vue前端優(yōu)雅展示后端十萬(wàn)條數(shù)據(jù)面試點(diǎn)剖析
這篇文章主要為大家介紹了vue前端優(yōu)雅展示后端十萬(wàn)條數(shù)據(jù)的考點(diǎn)剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
vue表單驗(yàn)證rules及validator驗(yàn)證器的使用方法實(shí)例
在vue開(kāi)發(fā)中,難免遇到各種表單校驗(yàn),下面這篇文章主要給大家介紹了關(guān)于vue表單驗(yàn)證rules及validator驗(yàn)證器使用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
Vue中代碼編輯器與實(shí)時(shí)預(yù)覽功能
CodeMirror提供了強(qiáng)大的代碼編輯功能,而Vue.js使得組件的創(chuàng)建和數(shù)據(jù)綁定變得非常簡(jiǎn)單,當(dāng)用戶編輯代碼時(shí),實(shí)時(shí)預(yù)覽會(huì)根據(jù)代碼的變化進(jìn)行更新,從而為用戶提供了一個(gè)交互式的編程環(huán)境,這篇文章主要介紹了Vue中如何進(jìn)行代碼編輯器與實(shí)時(shí)預(yù)覽,需要的朋友可以參考下
2023-10-10
element?實(shí)現(xiàn)導(dǎo)航欄收起展開(kāi)功能及思路
這篇文章主要介紹了element?實(shí)現(xiàn)導(dǎo)航欄收起展開(kāi)功能，實(shí)現(xiàn)思路先給 el-menu加上 :collapse="isCollapse" 屬性，這個(gè)屬性也是 element 上的一個(gè)參數(shù)，意思為是否開(kāi)啟折疊動(dòng)畫(huà)，在 data 中定義 isCollapse ，用 true 和 false 控制展開(kāi)與收起，需要的朋友可以參考下
2023-01-01
Vue使用antd組件a-form-model實(shí)現(xiàn)數(shù)據(jù)連續(xù)添加功能
這篇文章主要介紹了Vue使用antd組件a-form-model實(shí)現(xiàn)數(shù)據(jù)連續(xù)添加功能,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-12-12