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>&nbsp; <div id="main">&nbsp; &nbsp; <span v-if="title">aaa</span>&nbsp; &nbsp; <span v-else>bbb</span>&nbsp; &nbsp; <button @click="clickme">aaaaa</button>&nbsp; </div></template><script>export default{&nbsp; data () {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; title: true&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; clickme () {&nbsp; &nbsp; &nbsp; this.title = !this.title;&nbsp; &nbsp; }&nbsp; }}</script>