Question

我正在使用https://vuejs.org/v2/guide/events.html#Method-Event-Handlers

中的示例

我想在点击按钮时隐藏#content中的消息，但我遇到了奇怪的问题：当button包含任何内容时，v-on:click元素会消失。当我从中删除“开关”时，页面上会出现按钮。

另外，我的第二个问题：这是使用Vuejs显示/隐藏事物的正确方法吗？

我的代码：

<div id="navigation">
    <button v-on:click="switch">Switch</button>
</div>

<div id="content">
    <p v-if="show">{{ message}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var content = new Vue({
        el: '#content',
        data: {
            message: 'Hello Vue!',
            show: true
        }
    });

    var navigation = new Vue({
        el: '#navigation',
        data: {
        },
        methods: {
            switch: function() {
                content.show = !content.show;
            }
        }
    });
</script>

Answer 1

switch是一个保留的Javascript关键字，使用其他名称（例如toggle）可以解决问题。

＆＃13;

var content = new Vue({
  el: '#content',
  data: {
    message: 'Hello Vue!',
    show: true
  }
});

var navigation = new Vue({
  el: '#navigation',
  data: {},
  methods: {
    toggle: function() {
      content.show = !content.show;
    }
  }
});

＆＃13;

<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
<div id="navigation">
  <button v-on:click="toggle">Switch</button>
</div>

<div id="content">
  <p v-if="show">{{ message}}</p>
</div>

＆＃13;

作为旁注，我强烈反对这个例子中的方法。应该隔离Vue实例。建议创建组件，并通过事件总线或vuex进行通信。

Vue.js：添加v-on时按钮消失：点击

1 个答案: