11条件渲染

<template>
    <div>
      <h1>条件渲染</h1>
    </div>
    <hr/>
    <div>
      <h2>当前的n值是 {{n}}</h2>
      <button v-on:click="n++">点我n加1</button><br>
      使用v-show做条件渲染
      <h2 style="color:blue" v-show="false">无爱便可破{{name}}</h2>
      <h2 style="color:skyblue" v-show="1===1">无爱便可破{{name}}</h2>
      <hr/>
      使用v-if做条件渲染
      <h2 style="color:blue" v-if="false">无爱便可破{{name}}</h2>
      <h2 style="color:skyblue" v-if="1===1">无爱便可破{{name}}</h2>
      使用 v-else 和 v-else-if
      <div v-if="n===1">双标的人生是不是虚伪的</div>
      <div v-else-if="n===2">得不到戒不掉忘不了,逍遥地看淡就好</div>
      <div v-else-if="n===3">不是努力没用，是你努的那点力没用</div>
      <div v-else-if="n===4">是真的喜欢吗,还是在找谁的影子</div>
      <div v-else>你的回忆停留在了那里</div>
  
      v-if与template的配合使用
      <template v-if="n===6">
        <h2>别一遇到砍，就变得好像不堪负重的样子</h2>
        <h2>人不应该只呆在有天花板的地方</h2>
        <h2>请别悄悄松开你的梦想， 他迟早会在你手里发光！</h2>
      </template>
    </div>
    条件渲染:<hr/>
            1.v-if<hr/>
                  写法:<hr/>
                      1.v-if="表达式"<hr/>
                      2.v-else-if="表达式"<hr/>
                      3.v-else="表达式"<hr/>
                适用于:切换频率较低的场景<hr/>
                特点:不展示的DOM元素直接移除<hr/>
                注意:v-if可以和:v-else-if,v-else 一起使用， 但要求结构不能被“打断”<hr/>
            2.-v-show<hr/>
                  写法:v-show="表达式"<hr/>
                  适用于:切换频率较高的场景<hr/>
                  特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉<hr/>
            3.备注:<hr/>
            使用v-if时,元素可能无法获取到,而使用v-show一定可以获取到。<hr/>
  
  </template>
  <script>
  // import  01_初始Vue  from './components.';
  export default {
  //data的第二种写法:函数式
    data() { 
      // console.log('@@@',this);
      return {
        name:'情局',
        n:'0',
      }
    },
    methods:{
    },
    computed: {
      },
    watch: {
    }
  
    
  }
  </script>
  <style scoped>
  </style>