Table of contents

one, v-if

Using v-if alone, the variable is a boolean.

    <div id="app">
        <h2 v-if="flag1">hello！</h2>
        <h2 v-if="flag2">hello！Vue！</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data() {
                return{
                    flag1:true,
                    flag2:false,
                }
            },
        })
    </script>

Because the status of flag2 is false, it is not displayed.

二、v-if、v-elseif、v-else

The joint use of v-if, v-else, and v-else-if is equivalent to if, elseif, and else, but it is recommended to use computed properties when there are many conditions.

Directly use examples to show, and you can intuitively see the specific usage.

Give a score, output below 60 as fail, between 60 (inclusive) and 75 as pass, between 75 (inclusive) and 90 as good, and between 90 (inclusive) and 100 as excellent.

 <div id="app">
        <div v-if="soces<60">不及格</div>
        <div v-else-if="soces>=60 && soces<=75">及格</div>
        <div v-else-if="soces>75 && soces<=90">良好</div>
        <div v-else>优秀</div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                soces: 95,
            }
        })
    </script>

Three, v-if, v-else application bug

As shown in the figure, the content inside has not changed when the data is replaced.

When vue is rendering DOM, for performance reasons, it will reuse existing elements instead of creating new DOM elements every time.
In the above demo, Vue internally found that the original input element is no longer used, so it is directly mapped to the virtual DOM for reuse.
If you don't want similar reuse problems, you can add keyvalues to the corresponding dom elements and ensure keythat they are different.

    <div id="app">
        <span v-if="user">
            <label for="username">用户账号</label>
            <input type="text" id="username" key="username" placeholder="请输入用户名">
        </span>
        <span v-else="user">
            <label for="email">用户邮箱</label>
            <input type="text" id="email" key="email" placeholder="请输入邮箱">
        </span>
        <button @click="user=!user">切换登录方式</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    user: true,
                }
            },
        })
    </script>

Modified effect:

4. v-show

When v-if is rendered for the first time, if the condition is false, nothing will be done, and the page will be deemed to have no such elements. When the condition is true, start partial compilation and dynamically add elements to the DOM element. When the condition changes from true to false, start partial compilation, and unload these elements, that is, delete.

v-show Regardless of whether the condition is true or false, it will be compiled when it is rendered for the first time, that is, the label will be added to the DOM. When switching later, use the display: none; style to display hidden elements. It can be said that just changing the style of css will hardly affect any performance.

    <style>
        .d1 {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="d1" v-show="flag">hello Vue!</div>
        <div v-show="!flag">hello Vue!</div>
        <button @click="handle">变色</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                flag: false,
            },
            methods: {
                handle() {
                    this.flag = !this.flag
                }
            },
        })
    </script>

As can be seen from the figure below, the display properties of the two divs are being exchanged.

Five, v-for traverses the array

  <div id="app">
    <!-- 1.遍历过程没有使用索引（下标值） -->
    <ul>
      <li v-for="item in names" >{
   
   {item}}</li>
    </ul>
    <!-- 2.遍历过程有使用索引（下标值） -->
    <ul>
        <li v-for="(item,index) in names"  >{
   
   {item+"---"+index}}</li>
    </ul>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        names:["zzz","ttt","yyy"]
      }
    })
  </script>

Generally need to use the index value. <li v-for="(item,index) in names" >{ {index+":"+item}}</li>index indicates the index, and item indicates the currently traversed element.

Six, v-for traversal object

  <div id="app">
    <!-- 1.遍历过程没有使用index索引-->
    <!-- 格式为：(value, name) -->
    <ul>
      <li v-for="(item,key) in user" >{
   
   {key+"---"+item}}</li>
    </ul>
    <!-- 格式为：(value, name, index) -->
    <ul>
      <li v-for="(item,key,index) in user" >{
   
   {key+"---"+item+"---"+index}}</li>
    </ul>

  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        user:{
          name:"zzz",
          height:188,
          age:24
        }
      }
    })
  </script>

Vue conditional judgment and loop traversal (v-if, v-elseif, v-else, v-show, v-for)