Please enable JavaScript.

Coggle requires JavaScript to display documents.

Basic 2 - Coggle Diagram

- - - - "goal" is only visible inside element with v-for and its child
      - when the array changes, Vue updates only the new element and renders it, with the rest untouched.
      - use "goal in goals" instead of "goal of goals", different from Angular
  - - - <li v-for="(goal, index) in goals" :key="goal"><input type="text"></li>
        
        here goal is text content.
        
        Do not bind key with index. why?
- - - - <p v-if="goals.length === 0">
      - <ul v-if="goals.length !== 0">
    - - only works for direct neighbor of the v-if element
        
        <p v-if="..."><ul v-else="...">
        
        OK
        
        <p v-if><p>Something in between</p><ul v-else>
        
        do not work
    - - <p v-if="score > 90">A</p>
        <p v-else-if "score > 80">B</p>
        <p v-else>Failed</p>
  - - - better performance for things that switch between showing and hiding a lot.