自动显示编码,{{}}vue插值

76 阅读1分钟

效果图:在下方表格输入内容,上方表格自动显示。

image.png

{{}}vue的插值

  • 主要进行数据的绑定,最常见的是Mustache语法,双大括号的文本插值。
  • 例如: <span>Message:{{msg}}</sapn>
  • msg将会被代替,msg定义在data对象中的值;
  • 无论何时,绑定在数据对象上的msg属性发生了改变,插值处的内容都会更新。

代码如下

显示框的内容

<el-form-item label="库位编码">			
<span>{{ form.positionCode }}</span>
</el-form-item>

输入框的内容

	<h3>库位设置</h3>
	<el-row>
	<el-col :span="5">
	<el-form-item label="区域" label-width="40px">
	<el-input v-model="form.positionArea" placeholder="请输入字母+数字"
	 maxlength="6" @input="inputChange($event, 'positionArea')"
	style="width: 100px"/>
	</el-form-item>
	</el-col>
	<el-col :span="5">
	<el-form-item label="巷道" label-width="40px">
	<el-input v-model="form.positionLine" placeholder="请输入字母+数字"
	style="width: 100px" maxlength="6"
	:disabled="form.positionArea == undefined || form.positionArea == ''"
	@input="inputChange($event, 'positionLine')"/>
	</el-form-item>
	</el-col>
	<el-col :span="5">
	<el-form-item label="排" label-width="20px">
	<el-input v-model="form.positionRow" style="width: 100px" maxlength="6"
	@input="inputChange($event, 'positionRow')" :disabled="form.positionLine == undefined || form.positionLine == ''" />
	</el-form-item>
        </el-col>
	<el-col :span="5">
	<el-form-item label="层" label-width="20px">
	<el-input
	v-model="form.positionLayer"
	style="width: 100px"
	maxlength="6"
	@input="inputChange($event, 'positionLayer')"
	:disabled="form.positionRow == undefined || form.positionRow == ''"/>
	</el-form-item>
	</el-col>
	<el-col :span="4">
	<el-form-item label="列" label-width="20px">
	<el-input
	v-model="form.positionColumn"
	style="width: 80px"
	maxlength="6"
	@input="inputChange($event, 'positionColumn')"
        :disabled="form.positionLayer == undefined || form.positionLayer == ''"/>
	</el-form-item>
	</el-col>
	  </el-row>