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

it2025-01-25  16

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>

 

最新回复(0)