社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > 主體

Vue中常用的指令總結

不言
發布： 2018-07-26 12:53:23
原創
1446 人瀏覽過

 這篇文章分享給大家的內容是關於Vue中常用的指示總結，內容很詳細，接下來我們就來看看具體的內容，希望可以幫助到有需要的朋友。

1 常用指令

  • v-if指令

  • #v-show指令

  • #v-show指令

  • #v-else指令

  • v-for指令

  • #v-bind指令

    • # #v-model

    • v-on指令

#v-text指令

1.1 

v-if

是條件渲染指令，它根據表達式的真假來刪除和插入元素，它的基本語法如下：

v-if="expression"
登入後複製

expression是一個傳回bool值的表達式，表達式可以是一個bool屬性，也可以是一個回傳bool的運算式。例如：

<!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>
登入後複製
顯示結果如下、

#注意：v-if指令是根據條件表達式的值來執行

元素的插入或刪除行為。

1.2 

v-for指令

#v-for

指令基於一個陣列渲染一個列表，它和JavaScript的遍歷語法相似：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">v-for=&quot;item in items&quot;</pre><div class="contentsignin">登入後複製</div></div>items是一個數組，item是目前被遍歷的陣列元素。

範例程式碼：


    

        

            
                

                    name
                    age
                


            
            
                

                     {{item.name}}
                     {{item.age}}
登入後複製

1.3 v-bind 指令可以在其名稱後面帶一個參數，中間放一個冒號隔開，這個參數通常是HTML元素的特性（attribute），例如：

v-bind:class

v-bind:argument="expression"
登入後複製

1.4 v-model

v-model（表單元素設定了之後會忽略掉value，checked，selected），常用在表單 和