Vue- conditions, loop instructions

Conditional instructions

Knowledge Review:

El mount point members to make use of id, because always only one instance a label pair, can not use the '*' wildcard selector, first looking for is html, html not be used as a mount point, we try from the body following structure write their own label id work mount point, it is essentially a virtual instance of on-Vue Dom, Dom operation is complete virtual map to the real Dom go above, will replace Dom real, equal to replace the body, we can not let hang point in carrying on the body

There are key variables true and false can be resolved

This operation can also be done inside stitching, you can do write js code, but do not mind doing the interpolation expression, can only do simple operation

If the variable will be reported instead of the ordinary definition is not wrong, we need to define the data inside

Here 111,222, are true first set up will not continue to look down, if it is false ===

v-esle default branch bound v-if conditions permit, etc.

v-else-if it must be conditional and conditional branching v-if Bind

 <ul>
        <li @click="action('a')">a</li>
        <li @click="action('b')">b</li>
        <li @click="action('c')">c</li>
    </ul>

     <ul>
        <li v-show="flag == 'a'">aaa</li>
        <li v-show="flag == 'b'">bbb</li>
        <li v-show="flag == 'c'">ccc</li>
    </ul>

Click on the tab control page by controlling a small example of change

As above becomes below a aaa

Cycle instruction

Provided that there must be an array of values, if you want to display the index needs to num bracketed comma index

Dictionary for loop

Values are unordered, key is ordered, if you do not know something without error plus brackets

Vue in message boards

Note that the function name can not be keyword arguments del delete

If it is pop, then delete the default is the last

You need to delete splice, splice default there are three parameters

<body>
<div id="app">
   <p> <input type="text" v-model="val">
    <button @click="add(val)">评论</button></p>
    <ul>
        <li v-for="(info,i) in infos">{{ info }} <span @click="del(i)">x</span></li>
    </ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        on: ' #app ' ,
        data: {
            infos:[],
            val:''
        },
        methods:{
            del:function (i) {
                this.infos.splice(i,1)
            },
            add:function () {
                let val = this.val;
                if (this.val){
                    this.infos.splice(0,0,val);
                    val=''
                }
            }
        }
    })
</script>

v-model will be able to get the text entered by the user, and then add the function name to add a comment val parameter, then add methods which do determine if there is value back to him filled the infos array added to the page inside a for loop value, and then emptied of val