2020-9-5,input双向绑定

最新推荐文章于 2024-05-28 11:54:14 发布

N_ora

最新推荐文章于 2024-05-28 11:54:14 发布

阅读量209

点赞数

文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_33359745/article/details/108418696

版权

vue模拟input[type=‘number’] 组件功能。
父组件传入最大值，最小值，step

 <script src="https://unpkg.com/vue/dist/vue.js"></script>
      <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
      <style>
          [v-cloak]{
   
              display: none;
          }
          .inputBox{
   
              position: absolute;
          }
          .inputBox button{
   
              width: 30px;
          }
          .inputBox input{
   
              padding-left:10px;
              width:100px;
          }
      </style>
  </head>
<!--
    1.传入值类型判断
    2.初始化值范围判断
    3.按钮判断（min,max）
    4.输入值判断(类型，大小)
 -->
    <body>
        <div id="app">
            <input-box v-model="value" :step="step" :min="min" :max="max"></input-box>
        </div>
<!--       <div id="app">-->
<!--            // 组件，由父组件传入max，min，及绑定的v-model-->
<!--&lt;!&ndash;            <num-con v-model="value" :max="10" :min="0"></num-con>&ndash;&gt;-->
<!--       </div>-->
       <script>
       // 第一版
           // 判断是否存在数字可以匹配
           // function isValueNurnber (value) {
   
           //     return (/(^-?[0-9]+\.{
   1}\d+$)|(^-?

最低0.47元/天解锁文章

N_ora

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-9-5,input双向绑定

vue模拟input[type=‘number’] 组件功能。父组件传入最大值，最小值，step <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <style> [v-cloak]{
复制链接

扫一扫