无JavaScript基础学习Vue.js，遇computed计算属性使用问题求助

Hey there! Let's work through the issues in your code—since you're starting out without JavaScript basics, it's totally normal to hit these syntax and concept snags. Let's break this down step by step:

Key Issues in Your Code #

• Incorrect data object syntax: JavaScript objects use colons (:) to assign properties, not equals signs (=). Your data section has a syntax error here.
• Misusing computed properties: The showToggle1 you're binding to the button's click event shouldn't be in computed—computed properties are for calculating values based on existing data, not handling user actions like clicks. You need a method instead.
• Unfinished code: Your computed property cuts off mid-line (return this.s...), which would cause an error even if it was in the right place.

Corrected Full Code #

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

<script>
new Vue({
  el: '#app',
  data: {
    // Fixed: Use colon instead of equals sign for object property
    show: true
  },
  // Moved toggle logic to methods (the right place for click actions)
  methods: {
    showToggle1: function() {
      // Flip the 'show' boolean value when the button is clicked
      this.show = !this.show;
    }
  }
})
</script>

Quick Breakdown of Each Fix #

1. Data Syntax Fix: In JavaScript, object properties follow the key: value format—show: true is the correct way to define your initial visible state, not show = true.
2. Methods vs. Computed Properties:
   • Computed properties are for dynamic, derived values (like formatting text or filtering a list) that update automatically when their dependent data changes.
   • Methods are for actionable logic (like button clicks) where you want to run code in response to user interaction. That's why we moved showToggle1 to the methods section.
3. Toggle Logic: this.show = !this.show is a simple way to flip a boolean value—if show was true, it becomes false, and vice versa. This makes the <p v-if="show"> element appear and disappear when the button is clicked.

If you're still wrapping your head around computed properties, just remember: they're for displaying derived data, not handling user actions.

内容的提问来源于stack exchange，提问作者Jp Arcilla