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

在项目中遇到了一个问题，一个input框，输入值之后点击对号改变这个值，点击叉取消，回到原值，上图因为不想在data里面加值，之前是用v-model绑定的，vue中v-model其实就是input和value的结合，输入值触发input，值改变。如下：<inputv-bind:value="mes"v-on:input="mes= $event.target.value"/&g...

百慕达奶油

5357人浏览 · 2019-07-01 17:12:12

百慕达奶油 · 2019-07-01 17:12:12 发布

在项目中遇到了一个问题，一个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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^