欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2018年05月22日 09:19:35   作者：愛代碼也愛生活  
這篇文章主要介紹了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è)置屬性訪問器實(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)文章

最新評(píng)論