完成程式碼: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,
}
})
執行結果如下圖: