vue 模板语法

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

文本插值

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

html 复制代码
<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 后面。

html 复制代码
<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 指令。

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>
相关推荐
SUPER52662 小时前
FastApi项目启动失败 got an unexpected keyword argument ‘loop_factory‘
java·服务器·前端
sanx182 小时前
专业电竞体育数据与系统解决方案
前端·数据库·apache·数据库开发·时序数据库
你的人类朋友4 小时前
【Node】认识一下Node.js 中的 VM 模块
前端·后端·node.js
Cosolar4 小时前
FunASR 前端语音识别代码解析
前端·面试·github
@大迁世界7 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙7 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump7 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD8 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
不做无法实现的梦~8 小时前
jetson刷系统之后没有浏览器--解决办法
开发语言·javascript·ecmascript
德育处主任Pro8 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama