鍍金池/ 問答/HTML/ vue中用v-html動(dòng)態(tài)添加的內(nèi)容不能被vue解析嗎？

vue中用v-html動(dòng)態(tài)添加的內(nèi)容不能被vue解析嗎？

題目描述

我在一個(gè)頁面中用了v-html動(dòng)態(tài)插入新的HTML內(nèi)容，其中帶了vue的數(shù)據(jù)綁定內(nèi)容。但是沒有解析出來，顯示的是{{title}}

相關(guān)代碼

// 請(qǐng)把代碼文本粘貼到下方（請(qǐng)勿用圖片代替代碼）
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/jquery.min.js" type="text/javascript"></script>
<script src="js/vue.min.js"></script>

</head>
<body>

<div id="app">
    <div v-html="inner_html"></div>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            title: "這是一個(gè)測(cè)試"
        },
        methods: {

        },
        mounted: function() {
            this.inner_html = `
                    <div>{{title}}</div>
                `
        },
    });
</script>

</body>
</html>

問題描述

希望達(dá)到的效果是頁面顯示出title的數(shù)據(jù)（這是一個(gè)測(cè)試），
但是頁面渲染出來的是{{title}}

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

嘗試過強(qiáng)制重新渲染 this.$forceUpdate() ——但是無效

相關(guān)代碼

<script>

var vm = new Vue({
    el: "#app",
    data: {
        title: "這是一個(gè)測(cè)試"
    },
    methods: {

    },
    mounted: function() {
        this.inner_html = `
                <div>{{title}}</div>
            `
            
        this.$forceUpdate()
    },
});

</script>

求大神幫忙解答

回答
編輯回答
墨小白
更新元素的 innerHTML 。注意：內(nèi)容按普通 HTML 插入 - 不會(huì)作為 Vue 模板進(jìn)行編譯 。如果試圖使用 v-html 組合模板，可以重新考慮是否通過使用組件來替代。

v-html

vue是通過html模板觸發(fā)依賴收集，再代理data中get/set進(jìn)行更新渲染，所以你是不可能通過v-html添加進(jìn)去還能監(jiān)聽數(shù)據(jù)變化的。文檔也寫了你可以通過使用組件代替。

2017年5月15日 19:52
編輯回答
避風(fēng)港

看一下文檔中是這么說的

clipboard.png

2018年1月13日 11:05