vue.js指令總結

最後更新：2017-04-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：lang logs 閃爍 led 注意 input ble 屬性表單

1.v-html

　　用於輸出真正html，而不是純文字。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>v-html的使用</title>    <script src="js/vue.js"></script></head><body>    <div id="v-html" v-html="message">        {{message}}    </div>    <script>        var vHtml=new Vue({            el:‘#v-html‘,            data:{                message:‘<p>v-html指令添加的p標籤</p>‘            }        })    </script></body></html>

2.v-bind

　　用於html屬性的資料繫結。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>v-bind的使用</title>    <script src="js/vue.js"></script></head><body>    <input id="v-bind" type="text" v-bind:disabled="message">    <script>        var vBind=new Vue({            el:‘#v-bind‘,            data:{                message:‘false‘            }        })    </script></body></html>

3.v-on

　　用於監聽DOM事件。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>v-on的使用</title>    <script src="js/vue.js"></script></head><body>    <div id="v-on" v-on:click="changeStatus">        {{message}}    </div>    <script>        var vOn=new Vue({            el:‘#v-on‘,            data:{                message:‘我喜歡vue.js‘            },            methods:{                changeStatus:function(){                    if(this.message==‘我喜歡vue.js‘)                    {                        this.message=‘我不喜歡vue.js‘                    }                    else                    {                        this.message="我喜歡vue.js"                    }                }            }        })    </script></body></html>

　　注意：只有v-on和v-bind可以接參數，在指令後面用冒號指明屬性和值綁定。

4.v-model

　　用於表單輸入與應用狀態的雙向資料繫結。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>v-model的使用</title>    <script src="js/vue.js"></script></head><body>    <div id="v-model">        <input type="text" v-model="message">        <p>{{message}}</p>    </div>    <script>        var vModel=new Vue({            el:‘#v-model‘,            data:{                message:‘‘            }        })    </script></body></html>

5.v-if

　　v-if接收bool類型。true的話則產生html，false則不產生。或者直接將元素remove掉。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>v-if的使用</title>    <script src="js/vue.js"></script></head><body>    <div id="v-if">        <p v-if="seen">我在閃爍</p>    </div>    <script>        var vIf=new Vue({            el:‘#v-if‘,            data:{                seen:true            },            methods:{                change:function(){                    if(this.seen)                    {                        this.seen=false;                    }                    else                    {                        this.seen=true;                    }                }            }        })        setInterval(vIf.change,1000)    </script></body></html>

vue.js指令總結

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

vue.js指令總結

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support