首页> 基础笔记 >Vue学习笔记 Vue学习笔记
Vue模板语法
作者：小萝卜 2024-03-08 【 Vue 】 浏览 79
简介Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。
文本
数据绑定最常见的形式就是使用“Mustache” (双大括号) 语法的文本插值
<span>Message: {{ msg }}</span>
一般配合 js 中的 data() 设置数据
export default {
name: 'HelloWorld',
data(){
return{
msg:"消息提示"
}
}
}
原始 HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p
export default{
data(){
return{
rawHtml:"<a href='https://www.luowebs.com'>萝卜王</a>"
}
}
}
很赞哦！ (0)
上一篇：vue属性绑定指令v-bind
下一篇：创建 Vue 应用实例
