VUE 设置下拉框选中值 (vue学习一)

初学Vue,这个小问题还是折腾了一阵:

前台:

<td>年级</td>
            <td>
                <select id="grade" name="grade" v-model="value">
                    
                    <option v-for="item in todos.grade_list" :id="'grade_'+item.NV"  :value="item.NV" >{{item.NA}}</option>
                </select>
            </td>

JS:

<script type="text/javascript">
  
     var stuObj = eval(@Html.Raw(ViewBag.JSON));  
     const StudentInfoObj = {
        data() {
            return {

                todos:stuObj,  //这样引用上面的Js对象是为了避免重复,算是我的一点小改进吧
                value: stuObj.grade   //这也是引用,很高效的感觉.红色是关键部份
            }
         },
         created() {
             //this.value = todos.grade;
        }
    }
    Vue.createApp(StudentInfoObj).mount('#studentInfo')
</script>

后台:

 public ActionResult Student()
        {
            ViewBag.JSON = "";
            StudentManager stm = new StudentManager();
            StudentManager.StudentModule stu = stm.GetStudentInfo();
            ViewBag.JSON = Newtonsoft.Json.JsonConvert.SerializeObject(stu);
            return View("Student");
        }

public class StudentManager
    {
        public class StudentModule
        {
            public string stu_name;
            public string stu_no;
            public string grade;
            public string sex;
            public List<NameValue> sex_list;
            public List<NameValue> grade_list;
        }

        public List<StudentModule> StudentData()
        {

            List<StudentModule> lst = new List<StudentModule>();
            lst.Add(new StudentModule { stu_no = "001", stu_name = "Ben" });
            lst.Add(new StudentModule { stu_no = "002", stu_name = "Jay" });
            return lst;
        }

        public StudentModule GetStudentInfo()
        {
            StudentModule stu = new StudentModule();
            stu.stu_name = "Ben";
            stu.stu_no = "001";
            stu.sex = "male";
            stu.grade = "3";

            List<NameValue> lstSex = new List<NameValue>();
            lstSex.Add(new NameValue { NA = "男", NV = "male" });
            lstSex.Add(new NameValue { NA = "女", NV = "female" });
            stu.sex_list = lstSex;


            List<NameValue> lstGrade = new List<NameValue>();
            lstGrade.Add(new NameValue { NA = "一年级", NV = "1" });
            lstGrade.Add(new NameValue { NA = "二年级", NV = "2" });
            lstGrade.Add(new NameValue { NA = "三年级", NV = "3" });
            stu.grade_list = lstGrade;

            return stu;
        }
    }

    public class NameValue
    {
        public string NA;
        public string NV;
    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值