@{ ViewData["Title"] = "Home Page"; Layout = null; } <link rel="stylesheet" href="//unpkg.com/element-ui@2.9.1/lib/theme-chalk/index.css"> <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/element-ui@2.9.1/lib/index.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <style> .el-row { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } .el-col { border-radius: 4px; } .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 36px; } .row-bg { padding: 10px 0; background-color: #f9fafc; } </style> <p> <div id="app"> <el-row :gutter="20"> <el-col :span="3"> <el-input v-model="input" size="small" type="text" placeholder="请输入内容"></el-input> </el-col> <el-col :span="3"> <el-select v-model="value" size="small" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-col> <el-col :span="3"> <el-input v-model="input2" size="small" type="text" placeholder="请输入内容"></el-input> </el-col> <el-col :span="6"> <el-date-picker v-model="value2" type="daterange" value-format="yyyy-MM-dd" size="small" range-separator="-" start-placeholder="Applicant Begin" end-placeholder="Applicant End"> </el-date-picker> </el-col> </el-row> </div> </p> <script> var dd = new Vue({ el: '#app', created(){ axios.post('@Url.Action("Data")') .then(function (response) { console.log(response); dd.options = response.data; }).catch(function (error) { // 请求失败处理 console.log(error); }); }, data: { value2: '', input1: '', input2: '', input: '', options: [], value: '' }, }) </script>
public JsonResult Data() { var d = new[] { new { label = 1, value = 2 }, new { label = 3, value = 4 }, }; return Json(d); }