vue基于element保留一位小数（加验证）

最新推荐文章于 2024-01-05 14:47:02 发布

就像风1样

最新推荐文章于 2024-01-05 14:47:02 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue vue专栏文章标签： vue element 保留一位小数

本文链接：https://blog.youkuaiyun.com/qq_42221334/article/details/88739491

本文介绍了如何在Vue项目中结合ElementUI，实现输入数值时自动保留一位小数，并添加验证功能。详细步骤和代码展示，帮助读者理解操作过程。更多相关技巧可在Vue专栏中找到。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看效果：

代码

<el-form-item label="价格" prop="price">
       <el-input v-model="ruleForm.price" placeholder="请输入......" style="width:350px;margin-right: 10px;" size="small"></el-input>元
</el-form-item>

export default {
      data() {
        var checkAge = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('价格不能为空'));
          }
          var re = /^\d+(?=\.{0,1}\d+$|$)/ ;
          if (!re.test(value)) {
            callback(new Error('请输入数字值'));
          }else{
            value=(value*10/10).toFixed(1)
            this.ruleForm.price=value
          }
          
        };
        return {
           ruleForm: {
                price:"",//价格
            }
        },
        rules: {
            price: [{r