vue之条件渲染

vue之条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_条件渲染</title>

  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
条件渲染：
    1。v-if
      写法：
      （1）v-if="表达式"
      （2）v-else-if="表达式"
      （3）v-else="表达式"
      适用于：切换频率比较低的场景。
      特点：不展示的dom越安素直接被移除
      注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断

   2。v-show
      写法：v-show="表达式"
      适用于：切换频率比较高的场景。
      特点：不展示的dom元素未被移除，仅仅是使用样式隐藏掉了。

    3。备注：使用v-if时，元素可能无法获取到，儿使用v-show一定可以获取到。

    4。template的使用，不会破坏代码的结构。
        但是只能和v-if易引起使用，不能和v-show一起使用。

-->
<div id="root">

  <h2>当前的n值是{{n}}</h2>

  <button @click="n++">点我加1</button>
<!--  使用v-show做条件渲染-->
  <h2 v-show="a">欢迎来到{{name}}</h2>
  <h2 v-show="1===3">欢迎来到{{name}}</h2>

  <!--  使用v-if做条件渲染-->
  <h2 v-show="false">欢迎来到{{name}}</h2>
  <h2 v-show="1===1">欢迎来到{{name}}</h2>

  <div v-show="n===1">Angular</div>
  <div v-show="n===2">React</div>
  <div v-show="n===3">Vue</div>

  <div v-if="n===1">Angular</div>
  <div v-if="n===2">React</div>
<!--  如果if成立，则不会往下走-->
  <div v-if="n===3">Vue</div>
  <div v-else-if="n===4">Vue</div>
  <div v-else-if="n===5">Vue</div>
  <div v-else="n===6">Vue</div>

<!--template 只能配合v-if使用-->
  <template v-if="n===1">
    <h2>你好</h2>
    <h2>你好</h2>
    <h2>你好</h2>
  </template>

</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vue=new Vue({
        el:"#root",
        data:{
            name:'北京',
            a:true,
            n:0
        }
    })
</script>
</html>
posted @ 2022-06-10 01:10  King-DA  阅读(13)  评论(0)    收藏  举报