网站首页 > 知识剖析正文

Vue.js(五)动态绑定下拉框

nixiaole 2024-11-21 19:10:37 知识剖析 17 ℃
这里运用到的技术有：
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;
            }
        }
    }
上一篇： JavaScript-如何获取下拉框中的选定的值?
下一篇：快速发开框架
网站首页 > 知识剖析 正文

Vue.js(五)动态绑定下拉框

猜你喜欢

网站首页 > 知识剖析正文
