vue中的關鍵字

1. v-model

    是將標籤的value值與vue實例中data屬性進行綁定

請輸入您的專業:<input type="text" v-model="major"/>


new Vue({
    el:'#app',
    data:{
        major:'java'
    }

})

2. v-on

    通過配合具體的事件名,來綁定vue中定義的函數

請輸入您的專業:<input type="text" v-on="changeMajor"/>


new Vue({
    el:'#app',
    data:{
        major:'java'
    },
    methods:{
        changeMajor:function(){

        console.log("change Title")

}
    
    }

})

3.v-bind

      我們知道差值表達式是不能寫在html的標籤的屬性內的,那如果一定要用vue中的屬性作爲html標籤的屬性的內容,就可以通過v-bind進行屬性綁定。

new Vue({

    data:{
        link:'http://www.baidu.com'
    }

});

<a v-bind:href="link"> 百度 </a>

 4.v-once

       此時該標籤中的插值表達式,只獲取一次數據。之後數據的變化不影響此差值表達式的值。

5. v-hmtl 和 v-text

v-html會將vue中的屬性值作爲html的元素來使用

v-text會將vue中的屬性的值只作爲純文本來使用

<span v-html="mylink"></span>

<span v-text="mylink"></span>


new Vue({

    el:'#app',
    data:{
        link:'http://baidu.com',
        mylink:'<a href="http://www.baidu.com">百度</a>'

        }

    })

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章