vue v-if通过按钮改变变量true/false v-if不再执行了吗

Question

<template>  <div id="main">    <span v-if="title">aaa</span>    <span v-else>bbb</span>    <button @click="clickme">aaaaa</button>  </div></template><script>export default{  data () {    return {      title: true,      showIn: false,      imageSrc: 'http://www.baidu.com',      classA: 'aaa',      classB: 'bbb',      num: 0    }  },  methods: {    clickme () {      if (this.title === true) {        this.title = false        console.log(this.title)      } else {        this.title = true        console.log(this.title)      }    }  }}</script>

Answer 1

this.title === 'ture'三个等号是严格等于，会判断数据类型的，ture和'true'是严格不相等的，true为布尔值，'true'为字符串

Answer 2

请参照这个(简单暴力)：

<template>

  <div id="main">

    <span v-if="title">aaa</span>

    <span v-else>bbb</span>

    <button @click="clickme">aaaaa</button>

  </div>

</template>

<script>

export default{

  data () {

    return {

      title: true

    }

  },

  methods: {

    clickme () {

      this.title = !this.title;

    }

  }

}

</script>