【vue】当input里面的值修改后,想要在点击叉或者是取消时回退到原值(且不在vue data里面加数据)

在项目中遇到了一个问题,一个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>
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值