关于vue传值(小数)的问题

        今天写项目时,发现了一个问题,就是在我使用vue传值时,发现vue默认的将小数点后的零当成了无效值,只要小数点0的后面没有像1、2......等等非零值,那么该零会被默认不显示,就拿25.10这个数来说,出于零后再无有效值,则在使用的vue页面上,会被显示成25.1。这样有时会让我们的工作变得简单起来,但那也仅次于有时,就像这次,为使页面更美观以及预防今后在数据库中小数点后会出现多个数,所以对于该问题,通过度娘找到了许许多多的解决办法,下面将我认为最为简单的办法推给各位,如果有更简单的,请大佬留稿给些建议,如有错误,请大佬们多多指教。

步骤一、

filters:{
    hbnumber(value){
        //截取目标位置小数点后三位
        let realVal = parseFloat(value).toFixed(3)
        return realVal
    }
}

 注:hbnumber做为自己取得任意名,可随意改变,只要名字不被打,随心的去改,其后.toFixed()为本文主要所用方法。这时toFixed()想说,哥哥姐姐弟弟妹妹们,对我还有印象吗???,不明白的哥哥姐姐弟弟妹妹,toFixed的方法链接也在下面呀!!!!

JavaScript Number toFixed() 方法

步骤二、

{{ Lthree.Notridentone | hbnumber }}

注:这一步主要是将上一步中filters里所写的hbnumber引用到目标数据并对目标数据进行限制,其后toFixed(3),打个比方,现在数据为25.0000,那么页面显示的数据为25.000,顺其当.toFixed(2),现数据为25.000,那么页面非常小心翼翼的提醒着你,不会吧不会吧,不会有人知道我时25.00了吧。

                                                                                                                小白的豪豪

                                                                                                                写于2021年11月16日     晴

         

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue.js 中,组件之间可以通过 props 和事件实现传值。以下是传值的两种方式: 1. props props 是一种用于从父组件向子组件传递数据的方式。在父组件中使用子组件时,可以通过 props 属性向子组件传递数据,例如: ```html <!-- 父组件 --> <template> <div> <child-component :message="message"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { name: 'ParentComponent', components: { ChildComponent, }, data() { return { message: 'Hello', }; }, }; </script> ``` 在子组件中,可以通过 props 属性接收父组件传递的数据,例如: ```html <!-- 子组件 --> <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { name: 'ChildComponent', props: { message: String, }, }; </script> ``` 2. 事件 事件是一种用于从子组件向父组件传递数据的方式。在子组件中,可以通过 `$emit` 方法触发一个自定义事件,并传递数据,例如: ```html <!-- 子组件 --> <template> <div> <button @click="handleClick">Click me</button> </div> </template> <script> export default { name: 'ChildComponent', methods: { handleClick() { this.$emit('child-click', 'Hello'); }, }, }; </script> ``` 在父组件中,可以通过 `v-on` 指令监听子组件触发的自定义事件,并处理传递的数据,例如: ```html <!-- 父组件 --> <template> <div> <child-component @child-click="handleChildClick"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { name: 'ParentComponent', components: { ChildComponent, }, methods: { handleChildClick(message) { console.log(message); }, }, }; </script> ``` 通过事件的方式可以让子组件与父组件解耦,更加灵活。在实际开发中,可以根据实际需求选择合适的方式传递数据。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

许豪平安

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值