效果图:在下方表格输入内容,上方表格自动显示。
{{}}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>