vue select 动态绑定下拉框-设置默认值

一、拿到数据进行遍历，加载到下拉框中,v-text取代{{}}防止延迟数据渲染问题

<select id="totalYear" class="yearSel" v-model="yearSelectedTotal" v-on:change="getTotalFeeByType">
                <option :value="item.Id" v-for="item in yearOnlineList" v-text="item.Name"></option>
</select>

二、Vue中的Data()以及Created()声明存放数据的容器

data() {
            return {
                yearOnlineList: [],
                yearSelectedTotal: '',
            }
        },
        created() { // 这里相当于文档准备就绪函数,用来初始化数据
            this.getYearOnline();
            this.yearSelectedTotal = new Date().getFullYear();
        },

 

三、动态获取后台数据

methods: { // 方法
            async getYearOnline() {// 获取系统上线年份
                await axios.get('/StatisticsIndicator/GetYearOfSysOnline')
                    .then(response => {
                        this.yearOnlineList = response.data.data;
                    })
                    .catch(error => {
                        console.log(error);
                    });
                }
            }

四、Controller中处理数据

　　　　　/// <summary>
        /// 获取系统上线年份
        /// </summary>
        /// <returns></returns>
        public ActionResult GetYearOfSysOnline()
        {
　　　　　　　//这里是动态获取系统上线年份
            var onlineYear = hbiApp.GetYearOfSysOnline();
            var currYear = DateTime.Now.Year;
            List<HtmlSelectDto<int>> selList = new List<HtmlSelectDto<int>>() {
                 new HtmlSelectDto<int> {
                        Id=0,
                        Name="全部"
                    }
            };
            for (int i = onlineYear; i <= currYear; i++)
            {
                HtmlSelectDto<int> selectDto = new HtmlSelectDto<int>();
                selectDto.Id = i;
                selectDto.Name = i + "年";
                selList.Add(selectDto);
            }

            return Json(new { data=selList},JsonRequestBehavior.AllowGet);
        }

五、封装下拉框数据模型

 public  class HtmlSelectDto<T>
    {
        public T Id { get; set; }
        public string Name { get; set; }
    }