vue.js - Vue问题，如何理解“内容以 HTML 字符串插入——数据绑定将被忽略”？
本文介绍了vue.js - Vue问题，如何理解“内容以 HTML 字符串插入——数据绑定将被忽略”？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
原始的 HTML
双 Mustache 标签将数据解析为纯文本而不是 HTML。为了输出真的 HTML 字符串，需要用三 Mustache 标签：
<div>{{{ raw_html }}}</div>
内容以 HTML 字符串插入——数据绑定将被忽略。如果需要复用模板片断，应当使用 partials。
内容以 HTML 字符串插入——数据绑定将被忽略。这句是话出自Vue1.0官网教程数据绑定语法这一节。请问这句话怎么理解？
<body>
<!--View-->
<div id="box">
<p>{{{html}}}</p>
</div>
<script>
'use strict';
// 是数据部分
let oData= {
html : '<h5>这是H5标题</h5>',
};
// Vue实例
let App = new Vue({
el : '#box',
data : oData
};
</script> 我在控制台输入：oData.html=111; 运行后页面也显示了111，那就与内容以 HTML 字符串插入——数据绑定将被忽略。相冲突了...
请教，谢谢！
解决方案
你如果仔细看 partials 的内容的话，应该比较好理解这句话。
这句话的意思是，下面的代码中，otherData 不会被插值绑定，如果需要 otherData 插值绑定的话，需要使用 partials，不过 Vue 2 里，HTML 插值和 partials 都已经废弃了，为了方便向未来版本升级，建议不要使用。
<body>
<div id="box">
<p>{{{html}}}</p>
</div>
<script>
'use strict';
let oData= {
html : '<h5>另一个数据是{{otherData}}</h5>',
otherData: '123'
};
// Vue实例
let App = new Vue({
el : '#box',
data : oData
};
</script>这篇关于vue.js - Vue问题，如何理解“内容以 HTML 字符串插入——数据绑定将被忽略”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
