Question

当我尝试一个测试示例时，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">
    <!--CDN Vuejs-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Conversor</title>
    <div id="app" class="container">
        <h3>{{conversor()}}</h3>
        <input type="text" class="form-group" v-model="num">
    </div>
</head>

<body>

    <script>

        const app = new Vue({
            el: '#app',

            data: {
                num: 100,
                nDecimal: [1, 5, 10, 50, 100, 500, 1000],
                nRomanos: ['I', 'V', 'X', 'L', 'C', 'D', 'M']
            },

            methods: {
                conversor: function () {
                    if (this.nDecimal.indexOf(this.num) != -1) {
                        return this.nRomanos[this.nDecimal.indexOf(this.num)]
                    } else {
                        return 'Other'
                    }
                }
            }

        });

    </script>

</body>

</html>

Answer 1

对于此任务，最好的办法是使用观看，并要小心，因为您的数字是文本。解决方案如下：

<!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">
    <!--CDN Vuejs-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Conversor</title>
    <div id="app" class="container">
        <h3>{{conversor}}</h3>
        <input type="text" class="form-group" v-model="num">
    </div>
</head>

<body>

    <script>

        const app = new Vue({
            el: '#app',

            data: {
                num: 100,
                nDecimal: ['1', '5', '10', '50', '100', '500', '1000'],
                nRomanos: ['I', 'V', 'X', 'L', 'C', 'D', 'M'],
                conversor: 0
            },

            watch: {
                num: function (value) {
                    if (this.nDecimal.indexOf(value) !== -1) {
                       this.conversor = this.nRomanos[this.nDecimal.indexOf(this.num)]
                    } else {
                        return 'Other'
                    }
                }
            }

        });

    </script>

</body>

</html>

这是基于计算方法的另一种解决方案：

<!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">
    <!--CDN Vuejs-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Conversor</title>
    <div id="app" class="container">
        <h3>{{ conversor }}</h3>
        <input type="text" class="form-group" v-model="num">
    </div>
</head>

<body>

    <script>

        const app = new Vue({
            el: '#app',

            data: {
                num: 100,
                nDecimal: ['1', '5', '10', '50', '100', '500', '1000'],
                nRomanos: ['I', 'V', 'X', 'L', 'C', 'D', 'M']
            },

            computed: {
                conversor: function() {
                    if (this.nDecimal.indexOf(this.num) !== -1) {
                       return this.nRomanos[this.nDecimal.indexOf(this.num)]
                    } else {
                        return 'Other'
                    }
                }
            }

        });

    </script>

</body>

</html>

Vue不刷新数据

1 个答案: