当前位置：首页 > news >正文

vue 模板语法

news 2025/8/21 14:55:13

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML解析器解析。

文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache“语法(即双大括号):

<template>
<div><p>{{ msg }}</p>
</div>
</template><script>
export default{data(){return{msg:"hello world"}}
}
</script>
<style>
p{color: red;font-size: 30px;
}
</style>

使用JS表达式

每个绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 retumrn 后面。

<template>
<div><p>{{ msg }}</p><p>{{ num+1 }}</p><p>{{ flag ? "yes" : "no" }}</p><p>{{ text.split("").reverse().join("") }}</p>
</div>
</template><script>
export default{data(){return{msg:"hello world",num:1,flag:true,text:"界世好你"}}
}
</script>
<style>
p{color: red;font-size: 30px;
}
</style>

原始HTML

双大括号将会将数据插值为纯文本，而不是 HTML。若想插入 HTML，你需要使用
v-html 指令。

<template>
<div><p><span v-html="rawHtml"></span></p>
</div>
</template><script>
export default{data(){return{rawHtml:"<a href='#'>链接</a>"}}
}
</script>
<style>
p{font-size: 30px;
}
</style>