Question

我是VueJS的新手，在了解如何将事件与v-else-if结合使用时遇到了麻烦。我想做的是，当用户输入数字时，将会向他显示一个文本！这就是我到目前为止所得到的：

HTML：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>

<div id="app">
    <p v-if="number === '1'">You can see me!</p>
    <p v-else-if="number === '2'">Do you also see me?</p>
    <p v-else>Hello</p>
    <input v-on:input="changeText">
</div>
<script src="app.js"></script>

VueJS：

new Vue({
    el: '#app',
    data: {
        number: '1',
    },
    methods: {
        changeText = function(event){
            this.number = event.target.value;
        }
    }
})

有人可以帮忙吗？非常感谢你们！

Answer 1

您定义方法的语法已关闭；您可以这样做：

changeText (event){
  ...
}

或者：

changeText: function(event){
  ...
}

Answer 2

我将永久保留此评论，因为Psidom的评论可以完美解决您的问题。原始问题是由于语法错误，使用changeText: function(event){ ... }将解决此问题。如果打开浏览器的devtool控制台，您将立即看到正在记录语法错误。

但是，如果不首先声明该方法，则可以完全避免此问题。由于您实际上只是在尝试使用<input>元素来直接修改组件的data，因此可以使用v-model来实现。这样可以大大减少代码中的冗余，尤其是当您有多个输入元素时。

对于您而言，使用<input v-model="number">可以很好地工作：

new Vue({
    el: '#app',
    data: {
        number: '1'
    }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>

<div id="app">
    <p v-if="number === '1'">You can see me!</p>
    <p v-else-if="number === '2'">Do you also see me?</p>
    <p v-else>Hello</p>
    <input v-model="number">
</div>

使用v-else-if和事件VueJS

2 个答案: