Vue:实现输入框/选择列表内容更改,页面实时预览多个内容变化

这篇具有很好参考价值的文章主要介绍了Vue:实现输入框/选择列表内容更改,页面实时预览多个内容变化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

在各种前端页面中,比如用户信息注册的页面,往往有多个输入框和多个选项列表。

为了避免用户选错或者输入错误,可以在前端页面上实时将多个输入框的内容拼接起来,显示到页面或者弹出的窗口中,帮助用户核对、检查输入的内容是否有错,提高用户体验。

本文介绍了在 Vue 中如何实现用户输入多个内容或者选择多个选项列表,与多个内容拼接起来显示到页面上,实现实时预览的效果。


一、@input

1.@input 简介

@input是input框中的值变化时触发的函数

@change、@input、@blur事件三者比较
@change在输入框发生变化且失去焦点后触发;
@input在输入框内容发生变化后触发(在界面加载数据以前)
@blur失去焦点就触发

注意:
@change先于@blur
@input和change的默认参数为输入内容,而blur的默认参数为dom节点。

更多介绍可以参考:
vue表单中输入框事件的使用@input、@keyup.enter、@change、@blur
Vue中@input用法以及v-model示例
Vue中@change、@input和@blur的区别以及什么是@keyup

2.@input 用法

利用 @input 函数可以监控输入框或者选项列表内容变化的特性,我们可以给每个输入框或选项列表绑定一个监视器,监控到内容变化后就自动更新内容,并用 v-model 绑定需要实时预览的内容,实现内容实时更新的效果。文章来源地址https://www.toymoban.com/news/detail-495157.html

二、代码实例

<el-form :model="user_data" :rules="user_rules" ref="ruleForm" label-width="230px" id="user_form">
  <el-row>
    <el-col :span="12">
      <el-form-item label="性别:" prop="gender">
        <el-select
          v-model="user_data.gender"
          style="width: 200px"
          placeholder="请选择"
          @input="handleGenderChange"
        >
          <el-option value="1" label="男"></el-option>
          <el-option value="2" label="女"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
      <el-form-item label="备注:" prop="bz">
        <el-input
          class="bz"
          v-model="user_data.bz"
          placeholder="必填项"
          @input="handleBzChange"
        ></el-input>
      </el-form-item>
    </el-col>
  </el-row>
   <el-row>
    <el-col :span="12">
      <el-form-item label="用户信息预览:" prop="yhxx">
        <el-input
          type="text"
          class="yhxx"
          v-model="user_data.yhxx"
          :disabled="true"
          :style="{width:text(user_data.yhxx)}"
        ></el-input>
      </el-form-item>
    </el-col>
  </el-row>
 </el-form>

//根据内容长度,实时计算预览框的长度
text(){
	return function(value){
	  if(value == '' || value == 0){
	    return '200px'
	  }else{
	    return (String(value).length*13+70) + 'px'
	  }
	}
}

//根据性别选择的变化,实时更新内容
handleGenderChange(item){
  this.user_data.gender = item == "1"?"男":"女";
  if(this.user_data.bz.length > 0){
    this.user_data.yhxx = this.user_data.gender+","+this.user_data.bz;
  }else{
    this.user_data.yhxx = this.user_data.gender;
  }
},

//根据输入备注内容的变化,实时更新内容
handleBzChange(item){
  this.user_data.bz = item;
  if(this.user_data.bz.length > 0){
    this.user_data.yhxx = this.user_data.gender+","+this.user_data.bz;
  }else{
    this.user_data.yhxx = this.user_data.gender;
  }
},

到了这里,关于Vue:实现输入框/选择列表内容更改,页面实时预览多个内容变化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue如何实现实时监听页面宽度高度变化

    运用的主要技术:watch监听 话不多说直接上代码,自行研究

    2024年02月11日
    浏览(44)
  • 微信小程序:表格中更改输入框的值,实时获取表格全部数据,点击按钮更改数据库指定项数据

    样例: 样式展示 数据库中原始第一条数据  修改表格第一行的数量: 数据库结果     核心代码 wxml ①wx:for:执行循环将数组数据展示出来 ②在某一单元格加上input样式 ③在input中绑定:文本框改变事件,并且绑定data-index便于知道改变的具体是哪一行的数据 wxss js ①变更in

    2024年02月16日
    浏览(51)
  • 前端实现输入框实时搜索,【vue+el-input】

    一般搜索都是调后端的接口,绑searchValue字段(也有可能叫其他的字段名),通过后端的接口进行实时搜索 如果由前端自己实现搜索过滤的话也简单 1、input事件 2、绑数据源的时候,根据条件判断用过滤数组还是原数组 3、data中定义数据 4、先获取原数组的数据 5、输入框in

    2024年02月09日
    浏览(49)
  • vue3+antd——实现App.vue页面实时获取权限+用户信息的功能——基础积累

    之前写过一篇文章关于vue3+antd的框架模板,链接如下:http://t.csdn.cn/9dZMS 下面针对 App.vue 页面实时获取权限+用户信息的功能做一下记录 重要的代码如下: 通过 computed 计算属性进行用户信息的实时监听,用户信息更改时也会重新触发user参数的变化,最终导致user内容保持为最

    2024年02月14日
    浏览(38)
  • vue实现弹出框内嵌页面展示,添加tab切换展示实时加载

    最近做业务的时候,发现产品的原型图上有一个弹出框,上面包含了两个窗口要进行切换。 每个窗口都有分页列表展示、搜索、添加和删除,感觉就是两个完整的页面,如果全写在一个页面会很麻烦,还可能会出现一系列的问题,后期改起来比较麻烦,所以我就准备分开来写

    2024年02月16日
    浏览(42)
  • Vue实现当前页面禁止鼠标右键,复制文本内容和F12

    只在mounted()里面写下面的代码,在进入这个页面前其他页面是能正常的使用鼠标右键,复制文本内容和F12,但进入当前页后再出来就会影响到其他页面 所以要做到只控制当前页,我们需要在 destroyed()钩子中把这些禁止重新打开 ,这样就能实现该功能了 重新打开

    2024年02月08日
    浏览(39)
  • React 通过一个输入内容加入列表案例熟悉 Hook 基本使用

    我们创建一个react项目 在src下创建components文件夹 在下面创建一个index.jsx index.jsx 参考代码如下 首先 我们通过一个比较典型的方法定义了一个用于声明表单元素绑定响应式数据的的函数useInputValue 接收一个参数 用于做响应式数据的默认值 然后暴露他的value 同时 绑定了一个o

    2024年02月09日
    浏览(48)
  • 安卓开发多选列表和回显已选择内容

    安卓日常开发和学习过程中,经常会碰到需要多选列表和显示已选择内容的场景,本文将介绍安卓实现多选列表和回显已选择内容的一种方案。 话不多说,先上效果: 思路分析: 一个纵向列表显示待选择内容,一个横向列表用来显示已选择内容,点击待选列表和已选择列表

    2024年02月06日
    浏览(46)
  • vue echarts实现根据选择项年月时间切换数据显示柱状图,vue页面监听自适应

    echarts配置文档参考:Documentation - Apache ECharts 功能:可进行月度、年度切换显示相应的收入和支出柱状图数据; 这里进行了柱状图的简化配置,X轴Y轴都有所改写,具体的简化配置下文会贴出代码,参照功能开发时按照自己的需要去处理; 这里也会提到在开发时会遇到的问题

    2024年02月15日
    浏览(34)
  • uniapp 微信小程序 自定义弹框+picker下拉选择列表+输入表单:拒绝-选择理由弹窗

    效果: 1、template 2、data: 3、methods: 4、style

    2024年01月20日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包