Vue——插值表达式

{{value}}

示例

HTML：

<div id="app">{{name}}</div>

JS:

var app = new Vue({
    el:"#app",
    data:{
        name:"Jack"
    }
})

总结

使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据，我们称为插值闪烁。

v-text（推荐）

示例

HTML：

<div id="app">
    v-text:<span v-text="hello">vue数据绑定完成前显示的默认值</span> <br/>
</div>

JS:

var vm = new Vue({
    el:"#app",
    data:{
        hello: "<h1>大家好，我是峰哥</h1>"
    }
})

总结

• v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出

v-html

示例

HTML：

<div id="app">
    v-html:<span v-html="hello">vue数据绑定完成前显示的默认值</span>
</div>

JS:

var vm = new Vue({
    el:"#app",
    data:{
        hello: "<h1>大家好，我是峰哥</h1>"
    }
})

总结

• v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
• 存在一定的安全问题，容易出现脚本入侵，如无特殊需求建议使用v-text