Vue问题，如何理解“内容以 HTML 字符串插入——数据绑定将被忽略”？

发布于
2017-01-22

原始的 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 字符串插入——数据绑定将被忽略。”相冲突了...
请教，谢谢！

前端框架 vue.js

阅读 5k

2 个回答

得票最新

KingMario

7.2k31429

发布于
2017-01-22

✓ 已被采纳

你如果仔细看 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>