正常情況我們在頁面取值都是通過 {{ 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 }}
嗯,就醬~~