Internal instructions of vue

v-if v-else-if v-else v-show conditional instruction

1,v-if

v-if: it is an internal instruction of vue, which is used in our html.
v-if is used to determine whether to load the DOM of html. For example, we simulate a user's login state and realize the user name after the user logs in.
The code is as follows:

<div id="app">
        <h1 v-if='isShow'>{{msg}}</h1>
        <button @click='isShow=(isShow?false:true)'>Button</button>
    </div>
    <script>
    new Vue({
        el:'#app',
        data: {
            msg:'abc',
            isShow:true
        },
    })
    </script>

The effect is as follows:

2.v-else-if v-else

<div id="app">
       <div v-if="name=='mm'">
           mm
       </div>
       <div v-else-if="name=='hh'">
        hh
    </div>
    <div v-else>
        //Someone else
    </div>
    </div>
    <script>
    new Vue({
        el:'#app',
        data: {
            name:'cc'
        }
    })
    </script>

3.v-show
Adjust the display property in CSS. DOM has been loaded, but CSS control is not displayed.

 <div id="app">
        <h1 v-show='isShow'>{{msg}}</h1>
        <button @click='isShow=(isShow?false:true)'>Button</button>
    </div>
    <script>
    new Vue({
        el:'#app',
        data: {
            msg:'abc',
            isShow:true
        },
    })
    </script>

The difference between v-if and v-show:

• v-if: judge whether to load, which can reduce the pressure of the server and load when necessary.
• v-show: adjust the css dispaly property to make the client operation more smooth.

v-for loop instruction

The v-for instruction is to render an array in a group of data circularly. The v-for instruction needs a special syntax in the form of item in items. Items is the source data array and item is the alias of array element iteration.

 	<div id="app">
        <div v-for="(item,index) in arr">
            {{index+"Age"+item.age+";"+"Name"+item.name}}
            <div v-for="(items,indexs) in item.favor">
                {{indexs+items}}
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                name: 'cc',
                arr: [{
                    age: 18,
                    name: "menphis",
                    favor: ["Ha-ha", "Sell Meng"]
                }, {
                    age: 50,
                    name: "jack",
                    favor: ["Retarded", "Kitty"]
                }, {
                    age: 99,
                    name: "minnie",
                    favor: ["night owl", "Silly two ha"]
                }]

            }
        })
    </script>