简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

Summary of commonly used instructions in Vue

不言
Release： 2018-07-26 12:53:23
Original
1435 people have browsed it

The content shared with you in this article is a summary of commonly used instructions in Vue. The content is very detailed. Next, let’s take a look at the specific content. I hope it can help friends in need.

1 Commonly used commands

  • v-if command

  • v-show command

  • v-else instruction

  • v-for instruction

  • v-bind instruction

  • v-model

  • v-on command

  • v-text command

1.1 v-if is a conditional rendering instruction, which deletes and inserts elements based on the true or false expression. Its basic syntax is as follows: 

v-if="expression"
Copy after login

expression is an expression that returns a bool value. Expression The formula can be a bool attribute or an operation formula that returns bool. For example: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-if="name.indexOf(&#39;jack&#39;) >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        
        var vm = new Vue({
            el: &#39;#app&#39;,
            data: {
                yes: true,
                no: false,
                age: 28,
                name: &#39;keepfool&#39;
            }
        })
    </script>
</html>
Copy after login

The display result is as follows,

Note: v-if instruction is executed based on the value of the conditional expressionInsertion or deletion behavior of elements.

1.2 v-for directive

v-for directive renders a list based on an array, which is similar to JavaScript’s traversal syntax : 

v-for="item in items"
Copy after login

items is an array, item is the array element currently being traversed.

Sample code: 


    

        

            
                

                    name
                    age
                


            
            
                

                     {{item.name}}
                     {{item.age}}
Copy after login

1.3 The v-bind directive can take a parameter after its name, separated by a colon. This parameter is usually an attribute of the HTML element, for example ：v-bind:class

v-bind:argument="expression"
Copy after login

1.4 v-model

v-model (value, checked, and selected will be ignored after the form element is set), commonly used in Forms and