## 显示与隐藏

v-if vs v-else

<body>
  <div id="app">
    <!-- a)	区别:
    i.	v-if删除和添加dom元素
    ii.	v-show设置display:none -->
    <button @click="changeShow" > 改变显示数据</button>
<!-- v-if = "" 布尔值  -->
    <div v-if= "flog">
      我是v-if控制显示内容
    </div>
    <!-- <p>lalal </p> -->
<!-- v-else需要跟在 v-if后面 -->
    <div v-else>
      我是v-else控制显示内容
    </div>
    <!-- v-else-if -->
    <div v-if = "num == 1">1</div>
    <div v-else-if = "num == 2">2</div>
    <div v-else-if = "num == 4">4</div>
    <div v-else-if = "num == 5">5</div>
    <div v-else >3</div>
    <button @click = "add1">+1</button>
<!-- v-show = "" 布尔值  -->
    <!-- <div v-show= "flog">
      我是v-show控制显示内容
    </div> -->
  </div>
  <script>
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
     
      el: '#app',
      // 变量的定义  一般就是两部分,一个是干什么的,一个是类型 一般如果是布尔值,用 is+第二个单词 如isLogin
      data: {
     
        flog:false,
        num:1,
      },
      methods: {
     
        changeShow(){
     
          this.flog = !this.flog
        },
        add1(){
     
          this.num ++
        }
      }
    });
  </script>
</body>

你可能感兴趣的:(vue,vue)