Question

我正在尝试学习vue.js，尽管没有任何javascript背景。我在播放了一段关于＆＃39;计算机＆＃39;的视频时遇到了一些代码，我尝试了它并在此过程中遇到了一些麻烦。

<div id='app'>
<p>Do you see me?</p>
<p v-if="show">Do you also see me?</p>
<button @click="showToggle1">Switch!</button>
</div>

new Vue({
el:'#app',
  data:{
  show = true;
  },

  computed:{
     showToggle1:function(){
     return this.show = !this.show
     }
  },

  methods:{
     showToggle2:function(){
     this.show = !this.show;
  }
});

基本上它正在制作＆＃34;你也看到了我吗？＆＃34;消失并出现取决于＆＃34;显示＆＃34;的值。我知道如果你写@click：＆＃39; showToggle2（）＆＃39;而不是@click：＆＃39; showToggle1＆＃39;在按钮上，值会更改并且可以正常工作。我只是在理解计算机是如何工作的，以及为什么showToggle1在我点击按钮时不会改变show的值

Answer 1

有些问题。

首先，你有语法问题。 data是一个对象，因此不是：

data:{
  show = true;
}

应该是：

data:{
  show: true
}

接下来，计算属性将被用作...属性。例如，像data中声明的那样。所以，典型的，你从中读取。您在@click个事件中不执行计算属性。所以这段代码：

<button @click="showToggle1">Switch!</button>

不正确。它会出错，因为showToggle1不是一个方法，如上所述，它是一个计算属性。 click中应该包含的方法是：

<button @click="showToggle2">Switch!</button>

这样可行，因为showToggle2是一种方法。并且您应该使用方法来执行更改。

不是，在进入最后也是最棘手的部分之前，这是一个有效的演示：

new Vue({
  el: '#app',
  data: {
    show: true
  },
  computed: {
    /*showToggle1: function() {
      return this.show = !this.show;
    }*/
  },
  methods: {
    showToggle2: function() {
      this.show = !this.show;
    }
  }
});

<script src="https://unpkg.com/vue"></script>


<div id='app'>
  <p>Do you see me?</p>
  <p v-if="show">Do you also see me?</p>
  <hr>
  Value of show: {{ show }}<br>
  <button @click="showToggle2">Switch2!</button>
</div>

棘手的部分是你的计算属性（我在上面的代码中注释掉了）：

  computed:{
     showToggle1:function(){
     return this.show = !this.show
     }
  },

基本上它正在做的是每当它发生变化时自动否定show的价值。

这是因为只要show更新，就会计算计算属性。而正在发生的是：

您使用data初始化true（因为data: {show: true}）。
showToggle1计算出自动重新计算，因为它内部有this.show（取决于它）。
重新计算时，showToggle1会将show的值设置为false（因为return this.show = !this.show）。

这就是show变为假的原因。

这也是为什么每当你改变（即使从方法，这是正确的地方）show到true的价值时，它都会自动返回false。因为show中的任何更改都会触发showToggle1计算重新计算，这会将show设置回false。

总结：

使用方法执行更改。
不要更改计算属性中的属性。

vue.js计算初学者

1 个答案: