vue 条件渲染 

 <body>
    <!-- vue 条件渲染 -->
    <div id="root">
      <h1>欢迎来到{{name}}的课堂</h1>
      <h2 v-show="false">{{student}}欢迎来到{{name}}的课堂</h2>
      <h3 v-if="false">{{student}}欢迎来到{{name}}的课堂</h3>
      <h1>当前点击N值为：{{n}}</h1>
      <button @click="n++">点击我n++</button>
      <h1>显示div</h1>
      <div class="no1" v-show="n===1">我是第一个n++ </div>
      <div class="no2" v-show="n===2">我是第2个n++ </div>
      <div class="no3" v-if="n===3">我是第3个n++ </div>
      <div class="no3" v-else-if="n===3">我是第3个n++ </div>
      <div class="no3" v-else>快点击按钮我切换</div>
      <!-- if 之间的div 不能被断开 -->
      <h1>这里可以显示全部</h1>
      <template v-if="n===1"> 
        <!--template 只能配合v-if  使用  -->
        <h2>云南</h2>
        <h2>水电费</h2>
        <h2>很贵</h2>
      </template>
    </div>
    <script>
     Vue.config.productionTip=false;//阻止运行时提示开发版本
       new Vue({
         el:"#root",
         data:{
           name:'许杰然',
           student:'小明',
           n:0    //初始值0
         }
       })  
    </script>
  </body>

　　

posted @ 2021-11-20 09:58  And杰然  阅读(41)  评论(0)    收藏  举报