插值與表達式
使用雙大括號{{ }} 是最基本的文本插值方法亲善，它會自動將我們雙向綁定的實時數(shù)據(jù)顯示出來这吻。
示例代碼
<template>
<div id="app">
{{msg}}
</div>
</template>
<script>
export default {
name: "app",
data() {
return { msg: "Hello World !" };
}
};
</script>
結(jié)果:
image.png
v-html
v-html 用來輸出HTML筛婉。
示例代碼
<template>
<div id="app">
<span v-html="msg"></span>
</div>
</template>
<script>
export default {
name: "app",
data() {
return { msg: `<a >Vue官網(wǎng)</a>` };
}
};
</script>
結(jié)果:
image.png
v-pre
v-pre用來顯示{{ }}標簽户侥，而不進行替換却邓，使用v-pre可以跳過這個元素和它子元素的編譯過程硕糊。
示例代碼
<template>
<div id="app">
<span v-pre>{{msg}}</span>
</div>
</template>
<script>
export default {
name: "app",
data() {
return { msg: "Hello World !" };
}
};
</script>
結(jié)果：
image.png
過濾
Vue支持在{{ }}插值的尾部添加一個管道符|對數(shù)據(jù)進行過濾，經(jīng)常用來格式文本腊徙。過濾的規(guī)則是自定義的简十，通過個Vue實例添加選項filters來設(shè)置。
示例代碼
<template>
<div id="app">
{{date|formatDate}}
</div>
</template>
<script>
import Util from "./utils/util.js";
export default {
name: "app",
data() {
return {
date: new Date()
};
},
filters: {
formatDate: function(date) {
return `${date.getFullYear()}-${Util.format(
date.getMonth() + 1
)}-${Util.format(date.getDate())} ${Util.format(
date.getHours()
)}:${Util.format(date.getMinutes())}:${Util.format(date.getSeconds())}`;
}
}
};
</script>
結(jié)果：
image.png
