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>
相关推荐
阿芯爱编程4 小时前
2025前端面试题
前端·面试
前端小趴菜055 小时前
React - createPortal
前端·vue.js·react.js
晓13135 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo6 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴6 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7897 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼7 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原8 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf8 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js
白仑色8 小时前
完整 Spring Boot + Vue 登录系统
vue.js·spring boot·后端