模板语法

插值表达式

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

<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>