Usage of v-show for Toggling Visibility

Provide an example of toggling the visibility of an element using v-show instead of v-if for more performant conditional rendering.

// HTML template part
<div id="app">
  <button @click="visible = !visible">Toggle Visibility</button>
  <div v-show="visible">This element's visibility is toggled by v-show!</div>
</div>

This is the HTML structure where v-show directive is used to toggle element visibility. The button toggles the visibility of the div when clicked.

// JavaScript part
new Vue({
  el: '#app',
  data: {
    visible: true
  }
});

This is the Vue instance connecting to the HTML with an initial state set to make the div visible.