0

当我尝试一个测试示例时，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>

4

1 回答 1

0

对于这个任务，最好的办法是使用watch，并且要小心，因为你的num是文本。解决方案如下：

<!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>

于 2019-08-18T23:46:20.517 回答