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>