后台传了中文字段，vue、小程序要如何读取展示？

本文链接：https://blog.youkuaiyun.com/weixin_44988028/article/details/115250593

本文探讨了在后台传递中文字段后，如何在vue和小程序中正确读取和展示这些字段。对于小程序，无论是html中的引用还是js中的处理，都提供了相应的方法。在vue中，div引用方式与小程序类似，但在处理el-form时，prop字段可直接使用中文，data和method的引用则需要使用引号或中括号包裹。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 小程序

1.1 html

用 [‘中文字段’] 的形式进行引用

<view class="text" wx:if="{{newData['学生信息']['学生名称'] != null}}">
	     <view class="title">学生名称：</view>
	     <view class="title-text">
	     	<text>{{newData['学生信息']['学生名称']}}</text>
	     </view>
</view>

1.2 js

直接引用 newData.中文字段

getName(){
	console.log(this.newData.学生信息.学生名称)

	this.setData({
	  name: this.newData.学生信息.学生名称
	})
}

2. vue

div引用方法与小程序相同，这里讲一下el-form在遇到中文字段时的处理方法

prop字段可以直接引用中文

2.1 html

<el-form
   ref="studentForm"
   :rules="studentRules"
   class="clearfix student-form"
   :model="studentForm"
   label-width="150px"
 >
 	//单选框
   <el-row>
     <el-col :span="8">
       <el-form-item
         label="性别:"
         prop="学生信息.性别"
         :rules="{
           required: true,
           message: '请选择性别',
           trigger: 'blur',
         }"
       >
         <el-select
           v-model="studentForm['学生']['性别']"
           placeholder="请选择"
           @change="resetValidate"
         >
           <el-option
             v-for="item in sex"
             :key="'sex-' + item.value"
             :value="item.label"
           >
           </el-option>
         </el-select>
       </el-form-item>
     </el-col>
     
     //输入框
     <el-col :span="8">
       <el-form-item
         label="学生姓名:"
         prop="学生信息.学生姓名"
         :rules="{
           required: true,
           message: '学生姓名不能为空',
           trigger: 'blur',
         }"
       >
         <el-input
           placeholder="请输入学生姓名"
           v-model="studentForm['学生信息'].学生姓名"
         ></el-input>
       </el-form-item>
     </el-col>
     
	//多选框
     <el-col>
       <el-form-item label="回收资料:">
         <el-checkbox-group v-model="studentForm['学生信息']['爱好']">
           <el-checkbox
             v-for="item in hobbies"
             :label="item.value"
             :key="item.value"
             >{{ item}}</el-checkbox
           >
         </el-checkbox-group>
       </el-form-item>
     </el-col>
   </el-row>
 </el-form>

2.2 js

data里直接用引号 "中文字段"

data() {
    return {
		studentRules: {
		  "学生信息.性别": [
		    { required: true, message: "请选择性别", trigger: "blur" },
		  ]
		},
	}
}

method里用 [‘中文字段’]
表单的规则需要用一个中括号，如[“学生信息.性别”]

//改变状态时动态重置校验规则
resetValidate() {
  if (this.studentForm["学生信息"]["文理科"] == "理科") {
    this.studentRules["学生信息.文科"] = [
      { required: true, message: "请选择文科", trigger: "blur" },
    ];
  } else {
    this.studentRules["学生信息.理科"] = [
      { required: true, message: "请选择理科", trigger: "blur" },
    ];
  }
},