Vue插值学习入门

什么是插值？

插值就是往HTML网页写入内容。比如纯文本或者 html标记语言之类。

向网页写入纯文本内容

一般向网页中写入纯文本内容

<script>
 document.getElementById("app").innerHTML="hello,Vue Js";
</script>

而利用Vue向网页中写入内容则是
如下

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

<script>
    new Vue ({
        el:'#app',
        data:{
            message:'Hello Vue.js!'
        }
    })
</script>

结果输出

image.png

向网页写入HTML内容

这个可不只是改下message内容就ok了。而是在div区域里设置了v-html属性。

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>

结果

image.png

参考

Vue.js 模板语法 | 菜鸟教程
Vue深入解析-插值,绑定与指令 - 简书