Inline invert boolean @click in Vue.js

The key point of MVVM or MVC framework is model-driven. spanVisible is one property of your model. So you need update its value directly in every handler.

You are doing it wrong. <button v-on:click="toggle" type="button">Toggle</button>

In your script part:

data () {
    return {
        spanVisible: true
    }
},
methods: {
    toggle () {
        this.spanVisible = !this.spanVisible
    }
}

Note that data is declared this way if you are using Vue components. If you are using in file scripting, you will skip return

I think it is possible to do without any methods

Add a Click Event to reverse the value of the boolean variable. Like this:

@click="showExtra = !showExtra"

In your Script Data:

<script>
  export default {
  return {
    data() {
       showExtra: false
    }
 }
}
</script>