初学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;
}
&spm=1001.2101.3001.5002&articleId=121527099&d=1&t=3&u=2685257ea3d2491e9bdd345b30564978)

被折叠的 条评论
为什么被折叠?



