1.文本

<span>Message: {{ msg }}</span>

2.原始 HTML（ innerHTML innerText）

   <div>Text {{ rawHtml }}</div>
   <div v-html="rawHtml"></div>

3.绑定

// 一般写法
<div v-bind:id="dynamicId"></div>
//简洁写法
<div :id="dynamicId"></div>

4.测试用例

<template>
  <div class="hello">
    <h3>学习Vue:模版语法</h3>
    <p>值：{{ msg }}</p>
    <div>Text {{ rawHtml }}</div>
    <div v-html="rawHtml"></div>
    <div v-bind:id="dynamicId"></div>
    <div :id="dynamicId"></div>
    <p>{{ num+10 }}</p>
    <p>{{ flag ? "真猴子" : "假猴子"}}</p>
  </div>
</template>

<script>
export default {
  //  innerHTML innerText
  data() {
    return {
      msg: "模版\n",
      rawHtml: "<a href='http://www.baidu.com'>Baidu</a>",
      dynamicId:"test",
      num: 11,
      flag: false
    }
  }
};
</script>

5.展示效果