vue筆記（1）——插值總結

• 文本插值

<p>{{ text }}</p>
<p v-text="text"></p>
<p data-id="{{ id }"></p>
<p>{{ *text }}</p>  // "*"是隻渲染一次資料，後續資料變化不再關心
           

• html插值

// content: '<p>http://www.yuki.kim</p>'
<div>{{{ content }}</div>
<div v-html="content"></div>
           

注意：vue指令和自身特性内飾不可以插值的

• 表達式

{{ true? 1 : 0 }}
{{ str.split(",") }}
{{ num/100 }}
{{ str | toUpperCase }}
           

• 指令

• 分隔符

  有時候會和自己使用的模闆文法太類似，比如freemark的模闆文法${}，這時候可以選擇修改vue分隔符。

// 修改文本插值分隔符。變成<%text%>。
Vue.config.delimiters = ["<%" , "%>"]
// 修改html分隔符。變成<$html$>。
Vue.config.unsafeDelimiters = ["<$" , "$>"]