首页 > 其他分享 >Vue实现input宽度随文字长度自适应操作

Vue实现input宽度随文字长度自适应操作

时间:2022-11-03 22:35:14浏览次数:60  
标签:Vue return value 宽度 长度 input

<div class="textcontain">
     <input
      type="text"
      v-model.number="item.cardComboMoney"
      maxlength="5"
      placeholder="设定数值"
      oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
      :disabled='disabled'
      :style="{width:text(item.cardComboMoney)}"
     >
     <span
      class="textshow"
      v-if="item.cardComboMoney!=0&&item.cardComboMoney!=''"
     >元</span>
    </div>
computed: {
  text () {
   return function (value) {
    if (value == '' || value == 0) {
     return '100%'
    } else {
     return String(value).length * 0.32 + 'rem' //可以根据自己的需要修改单位或计算方式
    }
   }
  }
 },

 

标签:Vue,return,value,宽度,长度,input
From: https://www.cnblogs.com/zhangzhijian/p/16856073.html

相关文章

  • 若依(前后端分离版vue)项目部署Tomcat--构建发布到外置Tomcat
    前言:懒得码字,摘抄自:王清江唷微信公众号需求:总有一些公司需要用外置Tomcat来跑项目,下面讲述如何用外置Tomcat跑后端。第一步:引入依赖(admin模块下面):    <dependen......
  • vue3 leaflet this._map is null,this._map is undefined,listener not found ,cannot
    vue3leafletthis._mapisnull,this._mapisundefined,listenernotfound此类问题这个是vue3的变量深监听所导致的,vue2就没有此类的问题发生解决方法:加toRow()代......
  • vue项目中遇到的技术难点
    A.项目中有pdf在线预览,打印功能。其中pdf在线预览时,中文乱码,设置了后端返回的格式为blob,但是也不起作用。最后研究发现是用的vue-pdf插件,这个插件本身有bug。因为项目上......
  • 3.vue的插值语法
    插值语法就是将希望显示在页面的文本渲染出来,语法是{{}},在双大括号中可以添加变量,函数,表达式1.渲染变量1<!DOCTYPEhtml>2<htmllang="en">3<head>4<m......
  • 2.Vue的快速使用
    1.vue的导入1.1源码下载引入下载地址:vue3:https://unpkg.com/[email protected]/dist/vue.global.jsvue2:https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js1.2CDN引入<s......
  • vue(三)
    模板语法Vue.js使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML......
  • 1.vue的介绍
    1.前端的发展介绍最开始由前端三剑客,css.html,js来写网页,用户发送一个请求,刷新一次页面ajax的出现,使得可以发送异步请求,实现局部刷新ajax更加成熟,使得前后端分离成为趋......
  • 从 0 搭建一个 vue3 项目
    一、先实现一个简易版本初始化npmnpminit-y//-y能省去填写信息的步骤,一步到位安装几个必要的依赖1npminstallcss-loaderstyle-loader-D//解析css......
  • VUE根据url下载文件
    方法一:constdownloadRes=async()=>{letresponse=awaitfetch(url);letblob=awaitresponse.blob();letobjectUrl=window......
  • Vue 下载本地静态资源
    项目需要下载本地的Excel文档,文档是放在本地的没有在服务器,所以需要下载本地静态资源文件,开始把文件放在了这里src目录下的assets资源文件下下载报错找不到文件路径......