插值与表达式
使用双大括号{{ }} 是最基本的文本插值方法，它会自动将我们双向绑定的实时数据显示出来。
示例代码
<template>
<div id="app">
{{msg}}
</div>
</template>
<script>
export default {
name: "app",
data() {
return { msg: "Hello World !" };
}
};
</script>
结果:
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 href='https://vuejs.org/'>Vue官网</a>` };
}
};
</script>
结果:
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>
结果：
image.png
过滤
Vue支持在{{ }}插值的尾部添加一个管道符|对数据进行过滤，经常用来格式文本。过滤的规则是自定义的，通过个Vue实例添加选项filters来设置。
示例代码
<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>
结果：
image.png
