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>
相关推荐
遂心_3 分钟前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒4 分钟前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端
王同学QaQ25 分钟前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
岛风风25 分钟前
关于手机的设备信息
前端
ReturnTrue86838 分钟前
nginx性能优化之Gzip
前端
华仔啊41 分钟前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
程序员鱼皮1 小时前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
w_y_fan1 小时前
Flutter 滚动组件总结
前端·flutter
wuli金居哇1 小时前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端
Asort1 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript