vue 基础入门 模板语法-插值

数据绑定最常见的形式就是使用Mustache{{ }}的文本插值

<span>message:{{ msg }} </span>

Mustache的值会被替换成组件实例中msg的值,当组件实例中msg的值发生改变的时候,标签内的插值内容也会发生改变,如果只想执行一次,不想内容不断更新,可以使用

<span>message:{{*msg}} </span>

Mustache{{}}的值会将数据解释为普通的文本,而不是html代码,如果想要插入html代码

就需要v-html指令了，或者使用{{{}}}

<div v-html='msgSpan'>插入html代码{{msgSpan}}{</div>
<div >插入html代码{{{msgSpan}}}{</div>
<script>
data:{
msgSpan:'<span style="color:red;">我是插入的span标签<span>'
}
</script>

还有就是Mustache支持简单的表达式比如

{{number+1}}
{{Boolean?'yes':'no'}}
{{ message.split('').reverse().join('') }}

不能进行if判断,可以用三元表达式