[Vue.js]3.資料綁定篇/實作表單

2022-11-22

162
0
Vue.js
2022-12-03

文、意如

導讀目錄：

1.從零開始學Vue.js-先把基礎練起來-安裝篇

2.了解整個程式的流程架構及實作第一張Vue.js網頁

3.認識資料綁定篇/實作表單

了解了基本的程式架構後，接下來我們要來認識資料綁定以及屬性綁定

任務：資料綁定
1. 使用v-text 接資料
2. 使用大括弧 {{ }} 接資料
3. 認識資料型態function
4. 使用v-html 接資料
5. 使用v-model接資料
6. 設計表單資料綁定

任務：資料綁定

1. 使用v-text 接資料

例：v-text="message"

範例index.html程式碼參考如下：

<div id="myapp">
      <span v-text="message"></span>
</div>

範例main.js程式碼如下：

var myapp = new Vue({
  el: '#myapp',
  data: {
    message: 'Hello myapp!'
  }
})

2. 使用大括弧 {{ }} 接資料

第二種方法，使用大括號的方式來接資料例如{{message}}，這種方式使用起來會較有彈性更方便。

範例Index.html程式碼如下：

<div id="myapp">
      <span>{{message}}</span>
</div>

範例main.js程式碼如下：

var myapp = new Vue({
  el: '#myapp',
  data: {
    message: 'Hello myapp!'
  }
})

兩種方式混合一起用：

範例Index.html程式碼如下：

<div id="myapp">
      <span v-text="message"></span>
      <span>{{message}}</span>
</div>

範例main.js程式碼如下：

var myapp = new Vue({
  el: '#myapp',
  data: {
    message: 'Hello myapp!'
  }
})

網頁結果顯示：

程式碼參考：https://jsfiddle.net/YiruAtStudio/e4809f6t/5/

如果你的main.js是首頁，並預設已經有寫一些內容，那麼我們也可以繼續往下加入（例：17行）

這時候開啟我們的首頁最下方，就會有我們剛剛輸入的文字了。

可參考-程式碼：https://jsfiddle.net/YiruAtStudio/01kdp57w/6/

3. 認識資料型態function

如元件檔副檔名為.vue例App.vue它們都是各自獨立非共用，所以元件中的data都只能是function型態，並可用return 方式來回傳資料

例路徑：src\components\mytest.vue

參考程式碼如下

<div class="myfont">
        {{mymsg}}
</div>
<script>
export default{
  data () {
    return {
      mymsg: 'hi,mymsg!'
    }
  }
}
</script>

4. 使用v-html接資料：例v-html="message

如果要返回（return）的是html，則需要使用的是v-html

範例Index.html程式碼如下：

<div id="myapp">
 <span v-html="message"></span>
</div>

範例main.js程式碼如下：

var myapp = new Vue({
  el: '#myapp',
  data: {
    message: '<a href="#">我是超連結</a>'
  }
})
console.log(myapp.message)

執行結果：

完成程式碼參考：https://jsfiddle.net/YiruAtStudio/sx35fd9m/

5. 使用v-model接資料

先來看看v-model的效果如下圖，在使用者填完資料或選擇資料時，下方資訊則會自動更新。

使用方式如下，範例index.html程式碼：

<div id="myapp">
  姓名:<input type ="text" v-model="myname">
  購買數量:<input type = "number" v-model="mynum">
  <br>
  {{myname}}，購買數量為:{{mynum}}
</div>

範例main.js程式碼如下：

var myapp = new Vue({
  el: '#myapp',
  data: {
    myname: 'Name:',
    mynum: '5'
  }
})

console.log(myapp.myname)

完成檔：

完成程式碼：https://jsfiddle.net/YiruAtStudio/8vex0af1/

6. 設計表單資料綁定

範例index.html程式碼如下：

<input type ="text" v-model="myname">
<input type = "number" v-model="mynum">
<textarea v-model="mynote"></textarea>
運送:<br>
<input type ="radio" name="s1" v-model="transport"  value="711">7-11<br>
<input type ="radio" name="s1" v-model="transport"  value="family">全家<br>
<input type ="radio" name="s1" v-model="transport"  value="hilife">萊爾富<br>
加購:<br>
<input type="checkbox" v-model="chkbox" value="python">python
<input type="checkbox" v-model="chkbox" value="Java">Java
<input type="checkbox" v-model="chkbox" value="PHP">PHP
付款方式:
<select v-model="select_item">
  <option value="ATM">ATM</option>
  <option value="pay">貨到付款</option>
  <option value="ment">取貨付款</option>
</select>
{{myname}}，購買數量為:{{mynum}}，<br>
{{mynote}}。<br>
運送方式{{transport}}<br>
加購{{chkbox}}<br>
付款方式{{select_item}}

範例main.js程式碼如下：

var myapp = new Vue({
  el: '#myapp',
  data: {
    myname: 'Name:',
    mynum: '5',
    mynote: '備註',
    transport: '請選擇',
    // 宣告checkbox-data中的變數為陣列[]
    chkbox:[],
    //也可宣告null
    select_item:null,
  }
})

執行結果如下圖：

Yiru@Studio - 關於我 - 意如

回首頁

Yiru@Studio

Yiru@Studio