模板语法

插值表达式

使用 {{ ... }} 引用变量

<template>
  <div id="root">{{ name }}</div>
</template>

<script>
export default {
  data() {
    return {
      name: "kingmusi",
    };
  },
};
</script>

最终被编译成

<div id="root">kingmusi</div>

v-text 和 v-html

v-text 把标签里的文本替换为变量内容

v-html 把标签里的 html 代码替换为变量内容

<template>
  <div id="root">
    <div v-text="data"></div>
    <div v-html="data"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: "<span>kingmusi</span>",
    };
  },
};
</script>

最终显示

<span>kingmusi</span> kingmusi

v-text 和插值表达式最终显示形式相同

除了输入变量，还能输入js表达式（三者都可以）

<div id="root">{{ 'hello world ' + name }}</div>

最终被编译成

<div id="root">hello world kingmusi</div>