vue How to judge the addition and removal of attributes based on conditions

Judging the addition and removal of attributes based on conditions

Write a list and then want to add a loading style during the query data. At this time, you need to add a loading attribute, but after adding it, you will directly display loading.

Solution

:loading = isLoading

Below, you need to register isLoading as boolean type, as follows:

isLoading:false/true

Then change it to false when starting the query, and change it to false after the query results are released.

 = true
 = false

Vue's conditional judgment statement

v-if

Use the v-if command to determine the condition

Code example: Use the v-if directive in an element

<div >
    <input type="button" value='toggle' @click='flag=!flag'>
    <h3 v-if='flag'>v-if directive</h3>
</div>

var vm = new Vue({
    el:'#app',
    data:{
       flag:true
    },
    methods:{}
});

Here, the v-if directive will decide whether to insert an h3 element based on the value of the expression flag (true or false).

v-else

You can use the v-else directive to add an "else" block to v-if

Code example: Use the v-if , v-else directive in an element

<div >
    <h3 v-if='flag'>Yes</h3>    
    <h3 v-else='flag'>No</h3>
</div>

var vm = new Vue({
    el:'#app',
    data:{
       flag:true
    },
    methods:{}
});

Here, the v-if, v-else directive will determine whether to insert the h3 element and the value in the element based on the value of the expression flag (true or false).

v-else-if

v-else-if was added in 2.1.0 and is used as the else-if block for v-if. Can be used in chain multiple times

Code example: Use v-if , v-else, v-else-if directives in elements

<div >
    <h3 v-if='star==="Jackson"'>Jackson</h3>    
    <h3 v-else-if='star==="Lay"'>Lay</h3>    
    <h3 v-else='star==="Yang"'>Yang</h3>
</div>

var vm = new Vue({
    el:'#app',
    data:{
       star:Jackson
    },
    methods:{}
});

v-else , v-else-if must follow v-if or v-else-if.

v-show

v-show and v-if have similar effects; but they are very different in nature.

Code example: The difference between v-if and v-show

    <div >
        <input type="button" value='toggle' @click='toggle'>
        <!-- Generally speaking，v-if There is higher switching consumption，and v-show There is higher initial rendering consumption。
        therefore，If you need to switch frequently：use v-show better；If the conditions are unlikely to change at runtime：
        use v-if better -->
        <h3 v-if='flag'>v-if directive</h3>
        <h3 v-show='flag'>v-show directive</h3>
    </div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            flag:true
        },
        methods:{
            toggle(){
                 =! ;
            }
        }
    });
</script>

The difference between v-if and v-show

Difference 1:

• v-if is dynamically added. When the value is false, the element is completely removed, that is, the DOM does not exist;
• v-show only hides / displays. When the value is false, the element still exists in the DOM. If its original style is set to display:none, it will not be displayed normally.

Difference 2:

• v-if has high switching performance consumption
• v-show has high initial rendering consumption

The above is personal experience. I hope you can give you a reference and I hope you can support me more.