Vue的插值與表達式


正常情況我們在頁面取值都是通過 {{ data }}來取值,但是有時候我們就是想輸出HTML,而不是將數據解析后的純文本,這個時候可以使用v-html來綁定數據

<span v-html="link"> </span>
<script> export default { data() { return { link: '<a href="http://www.jinzhea.xyz">這是一個鏈接</a>' }; } }; </script>

這樣在頁面上渲染出來的就是一個具有點擊功能的a標簽,而不是純文本,如下圖所示,不過這里要注意如果將用戶生產的內衣用v-html輸出后,有可能導致XSS攻擊,所以要在服務端對用戶提交的內容進行處理,一般可將尖括號“<>”轉義。

 

如果想顯示{{ }}標簽,而不進行替換,使用v-pre即可跳過這個元素和它的子元素的編譯過程,例如

<span v-pre> {{ 這是不會編譯的內容 }} </span>

 

 

在Vue的{{ }}中,除了簡單的綁定屬性值外,還可以使用JavaScript表達式進行簡單的運算、三元表達式等,例如

  {{ number / 10 }} {{ isOk ? '是' : '否' }} {{ text.split(',').reverse().join(',') }}

顯示結果為

 

 

Vue.js只支持單個表達式,不支持語句和控制流。另外,在表達式中,不能使用用戶自定義的全局變量,只能使用Vue白名單內的全局變量,例如Math和Date,以下是一些無效的實例:

   <!-- 這是語句,不是表達式 --> {{ let a = 'http://www.jinzhea.yxz' }} <!-- 不能使用控制流,要使用三目表達式 --> {{ if (Ok) return msg }}

 

 

 

嗯,就醬~~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM