问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue组件中，传给输入框的数据value改变了，但视图没有更新

头像
朽木
    4417

    在输入框中输入20。按照写法1，value值变为10，但视图中还是显示20。
    写法2，提前增加了一次无关的赋值，视图也会跟随最后value的值改变。写法3视图也会跟随value改变。
    请问谁能帮我讲一下，写法1为什么视图不跟随数据value改变？是什么原理？什么原因？非常困惑中。。

    clipboard.png

        <template>
        <input type="text" :value="value" @change="editVal">
    </template>
    <script>
        function isValueNumber(value) {
            return /(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/.test(value + "");
        }
        export default {
            data() {
                return {
                    value: 10,
                    max: 10,
                    min: 0
                };
            },
            methods: {
                editVal: function(event) {
                    var val = event.target.value.trim();
                    if (isValueNumber(val)) {
                        val = Number(val);
                        
                        //写法1：视图不跟随value改变
                        if (val > this.max) {
                            val = this.max;
                        } else if (val < this.min) {
                            val = this.min;
                        }
                        this.value = val;
                        
                        // 写法2：为value提前增加一次无关的赋值，视图也会跟随value改变
                        // if (val > this.max) {
                        //     val = this.max;
                        // } else if (val < this.min) {
                        //     val = this.min;
                        // }
                        // this.value = 0;    //无关的赋值
                        // this.value = val;
                        
                        // 写法3：视图跟随value改变
                        // this.value = val;
                        // if (val > this.max) {
                        //     this.value = this.max;
                        // } else if (val < this.min) {
                        //     this.value = this.min;
                        // }
                        
                    } else {
                        event.target.value = this.value;
                    }
                }
            }
        }
    </script>

    感谢 aco的回答解决了我的问题：vue 判断出 value 的值没有发生变化就不会进行视图层的更新

    javascriptvue.js
    阅读 7.7k
    3 个回答
    得票最新
    头像
    aco
      1k1920
      ✓ 已被采纳

      试试这个

      editVal: function(event) {
  var val = event.target.value.trim();
  if (isValueNumber(val)) {
    val = Number(val);
    if (val > this.max) {
      val = this.max;
    } else if (val < this.min) {
      val = this.min;
    }
    this.value = val;
  }
  event.target.value = this.value;
}

      对于表单的绑定，不会时时刷新的

      头像
      啊秒
        4148

        用v-model

        头像
        luozz
          5.8k3629
          既然使用了Vue，那么就要准守它绑定输入的使用方法，要深究其原理的话，那么你得去看Vue的源码了，探索Vue的设计思想和实现原理。
          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Example</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="value" @input="changeInput">
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data () {
                return {
                    value: 0
                }
            },
            methods: {
                changeInput:function(event){
                    var a = event.target.value
                    if(a>10){
                        this.value = 10
                    }
                }
            }
        })
    </script>
</body>
</html>
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题
          宣传栏