在项目中遇到了一个问题,一个input框,输入值之后点击对号改变这个值,点击叉取消,回到原值,上图
因为不想在data里面加值,之前是用v-model绑定的,vue中v-model其实就是input和value的结合,输入值触发input,值改变。如下:
<input v-bind:value="mes" v-on:input="mes= $event.target.value"/>
实现取消返回,不添加data
<span v-if="showText">
<span class="fix-text">{{ setting.contractSubjectConfig.fixText }}</span>
<span class="blue-text pointer-text" @click="modifyWord()">修改</span>
</span>
<span class="input-content" v-else>
<span class="fix-input"><el-input :value="setting.contractSubjectConfig.fixText"
ref="test" placeholder="请输入内容"></el-input>
</span>
<i class="el-icon-circle-check blue-text font-tip"
@click="showText = true,
setting.contractSubjectConfig.fixText = $refs['test'].currentValue"></i>
<i class="el-icon-circle-close light-text font-tip"
@click="showText = true,
setting.contractSubjectConfig.fixText = $refs['test'].value"></i>
</span>