iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
1
Modern Web

網頁設計靠 Vue.js 轉前端系列 第 6

Vue[06]-資料雙向綁定

昨天學完了基本資料綁定,它是單純的綁入data內的資料,所以屬於「單向綁定」,那如果我們也可以輸入資料呢?那就叫「雙向綁定」了!

v-model

要講到「雙向綁定」就要先說一下v-model,它是Vue.js中的一個屬性,可以對input、textarea、select、checkbox等…這些輸入表單做雙向綁定,運做原理是透過監聽使用者輸入的事件來更新內容!聽起來有點抽象嗎?接下來實際做做看會比較容易了解。

input雙向綁定實做

我先拿簡單的<input>來做,用法其實很容易,直接加到上面就行了!

<template>
  <div id="app">
    <input type="text" v-model="myname" value="myname">
    <p>大家好!我叫 {{ myname }}</p>
  </div>
</template>

myname這個資料名字是我自已取的,你也可以換其它的,我把它綁到了v-modelvalue<p>上。
(註:<input>裡的value屬性為它的元素規定值,簡單說就是<input>裡輸入的內容。)

接著下一步,我在data()內寫入資料myname:'請輸入名子',全部完整範例如下:

<template>
  <div id="app">
    <input type="text" v-model="myname" value="myname">
    <p>大家好!我叫 {{ myname }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        myname:'請輸入姓名'
      }
    }
  }
</script>

完成後看看網頁,並試著在<input>內輸入名子,下方的<p>是不是也同步更新了呢?很容易吧?
https://ithelp.ithome.com.tw/upload/images/20181021/20111956gftX6OtOIy.png

textarea也是差不多做法!看完文章後,你可以拿它來練習看看!
select、checkbox等…因為會講到「陣列」也就是v-for,所以先不提!不然跟我一樣的新手可是會難消化的。

接著再來補充點常用語法!

.trim

在輸入資料時,難免會有人一開始前面多打了一個空白鍵,或是複製貼上時不小心多選到一個空白符號,這時貼心的.trim就能幫忙我們自動去掉空白!用法很容易,直接在v-model後加入.trim就行了!如下:
<input type="text" v-model.trim="myname" value="myname">

.lazy

剛剛有沒有發現,我們在<input>輸入文字時,它是完全即時同步的,那如果我要等離開<input>時才更新我輸入的內容呢?一樣在v-model後加入.lazy就行了!如下:
<input type="text" v-model.lazy="myname" value="myname">

.number

輸入欄位中,很多是限定輸入為「數字」的,比如說「年齡」,如果有人不小心輸入了文字呢?.number這時就好用了!老樣子,在v-model後加入.number,另外將<input>設定為type=number,它會只讓「數字」輸入,如下做法:
<input type="number" v-model.number="myname" value="myname">

今天講的也不難對吧!開始有點成就感了?加油!一起努力吧!


上一篇
Vue[05]-資料綁定
下一篇
Vue[07]-陣列v-for
系列文
網頁設計靠 Vue.js 轉前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言