這裡運用到的技術有：
1、bootstrap.css
2、一般處理程式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
el: '.container',
data: {
arr: [],
name: '',
pwd: '',
gender: '',
question: '',
answer:''
},
mounted() {
this.init();
},
methods: {
init: function () {
this.$http.get('/combobox.ashx', {
params: {}, jsonp: 'cb'
}).then(function (res) {
this.arr = res.body;
}, function () { });
},
}
});
}
</script>
</head>
<body>
<div class="container">
<form role="form">
<div class="form-group">
<label for="name">使用者名：</label>
<input type="text" id="name" v-model="name"
class="form-control" />
</div>
<div class="form-group">
<label for="pwd">密碼：</label>
<input type="password" id="pwd" v-model="pwd"
class="form-control" />
</div>
<div class="form-group">
<label>性别：</label>
<label class="radio-inline">
<input type="radio" v-model="gender"
value="男" checked="checked" />男
</label>
<label class="radio-inline">
<input type="radio" v-model="gender"
value="女" />女
</label>
</div>
<div class="form-group">
<label>密保問題：</label>
<select class="form-control" v-model="question">
<option v-for="item in arr" :value="item.q_id">
{{item.q_name}}
</option>
</select>
</div>
<div class="form-group">
<label for="answer">答案：</label>
<input type="text" id="answer" v-model="answer"
class="form-control" />
</div>
<div class="form-group">
<button type="button"
class="btn btn-primary btn-sm" @click="add()">
注冊
</button>
<button type="button"
class="btn btn-primary btn-sm">
取消
</button>
</div>
</form>
</div>
</body>
</html>
一般處理程式：combobox.ashx
public class combobox : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
DataTable dt = SQLHelper.GetTable("select * from question");
string str = JsonHelper.DataTableToJson(dt);
context.Response.Write(str);
}
public bool IsReusable
{
get
{
return false;
}
}
} ![vue2.0 筆記整理[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)