Vue基礎-文本顯示，v-html插入html代碼

1. 顯示內容 {{}}

<div id="app">
    <p>{{ message }}</p>
</div>

<script>
new Vue({
    el: '#app',  //el是選擇元素的掛載節點，這里#是加父節點id
    data: {       //賦值
         message: 'Hello Vue.js!'
    }
})
</script>

 

效果：

<div id="app">
    <p>Hello Vue.js!</p>
</div>

 

2. v-html

<div id="app">
    <div v-html="message"></div>  <!--生成的代碼會在這個元素子節點生成。-->
</div>

<script>
new Vue({
    el: '#app',
    data: {
        message: '<h1>aaa</h1>'
    }
})

alert(document.getElementById('app').innerHTML);
</script>

效果：

<div id="app">
    <div v-html="message"><h1>aaa</h1></div>
</div>