Vue基礎篇-基本指令 插值表達式,v-cloak,v-text,v-html和v-bind

1.插值表達式   {{變量}}  例如:

<p id="app">{{data}}</p>

<script>

new Vue({

    el:"#app",

    data:{

        data:"顯示的數據信息"

    }

});

</script>

2.v-cloak  用於處理網絡延遲造成插值表達式渲染出現{{data}}的情況.例如:

<style>

[v-clocak]{

   display:none;

}

</style>

<p v-clocak>{{data}}</p>

<script>

new Vue({

    el:"#app",

    data:{

        data:"顯示的數據信息"

    }

});

</script>

3.v-text  用於顯示文本信息。例如:

<p id="app" v-text="data"></p>

<script>

new Vue({

    el:"#app",

    data:{

        data:"顯示的數據信息"

    }

});

ps:v-text和{{變量}}插值表達式的區別在於 插值表達式可以擴展或者拼接新的字符串,而v-text只能是固定的內容 無法在標籤內新增字符串等信息

4.v-html 可以解析html的標籤字符串。例如:

<p id="app" v-html="data"></p>

<script>

new Vue({

    el:"#app",

    data:{

        data:"<a>顯示的數據信息</a>"

    }

});

ps:如果使用v-text會將a標籤顯示出來,而使用v-html則會自動解析html的標籤元素

5.v-bind 可以綁定標籤數據 例如:

<input v-bind:value="data"  />

<script>

new Vue({

    el:"#app",

    data:{

        data:"顯示的數據信息"

    }

});

ps:只要data的數據發生變化 input裏面的數據就會自動隨着變化而變化 我們不需要關心頁面的渲染問題

 

 

 

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