Vue基础-文本显示，v-html插入html代码

• Z时代
• 2024-01-10
• 分类：综合

1. 显示内容 {{}}

<div >
    <p>{{ message }}</p>
</div>

<script>
new Vue({
    el: '#app',  //el是选择元素的挂载节点，这里#是加父节点id
    data: {       //赋值
         message: 'Hello Vue.js!'
    }
})
</script>

效果：

<div >
    <p>Hello Vue.js!</p>
</div>

2. v-html

<div ></div>  <!--生成的代码会在这个元素子节点生成。-->
</div>

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

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

效果：

<div ><h1>aaa</h1></div>
</div>

以上是 Vue基础-文本显示，v-html插入html代码 的全部内容， 来源链接： utcz.com/z/378356.html