[Day 8] Vue的模板语法(Template Syntax)---插值

Vue的模板语法分成两种---插值和指令,而今天我们要来讲的是插值的部分,插值就是Mustache语法(双大括号),废话不多说直接开始吧~

Text(文本)

数据绑定最常见的形式是使用Mustache语法,Mustache语法就是前面几天例子都有使用的双大括号。
再让各位看一次双大括号是什麽~长下面这样
https://ithelp.ithome.com.tw/upload/images/20210921/201393928AWVggiW3x.png

v-once

如果想要执行一次性的插值,可以使用v-once这个指令,当数据更新时,插值处的内容不会改变。
https://ithelp.ithome.com.tw/upload/images/20210921/20139392Yo85kncqjK.png
这个例子中跑出来的结果是”我超级可爱”,而不是”你超级可爱”。

Raw HTML(原始HTML)

v-html

双大括号会将数据视为普通文本(Text),而不是html代码。如果要输出html就要使用v-html指令。
当没有使用v-html而是使用双大括号的情况下,如下图
https://ithelp.ithome.com.tw/upload/images/20210921/201393922GNIXIOiBp.png
会发现html代码并没有被表现出来,反而直接跑出一个字串
https://ithelp.ithome.com.tw/upload/images/20210921/20139392ckkdXOxDH9.png
这时候如果我们使用v-htmlv-html指令需要加在一个标签上,并对这个指令赋予一个变量,这边的变量用的是rawHtml
https://ithelp.ithome.com.tw/upload/images/20210921/20139392aBTBj7MrHg.png
出来的结果就是我们希望看到的那样了!!
https://ithelp.ithome.com.tw/upload/images/20210921/20139392Hm9LJrLIl5.png

微小结语

今天到这边结束!!明天会继续讨论Vue的模板语法,哇~我好期待欧╯︿╰


<<:  【Day07】Behavior Level

>>:  Day 12 CSS <圆角边框、盒子阴影>

【Day 01】认识资料结构 Data Structure ( 使用 JavaScript )

一、什麽是资料结构 ? 当我们撰写程序时,会宣告变数来存放资料,这些资料会储存在记忆体中,在我们需要...

Day20 - 铁人付外挂设定介面(二)- 全域设定

对於 WordPress 资料库结构有个大概的认识後,我们就能把後台的设定选项归纳为两种,一种是放在...

【制造转型分享】制造业导入MES数位转型,政府补助最高 5000 万

转型智慧工厂 导入 MES 冲产能 立法院於 2022 年元月三读通过「产业创新条例」第 10 条之...

如何下载高质量的 Twitter 影片

Twitter 上最受欢迎的功能就是「趋势」功能了。通过该功能,人们可以轻松了解世界各地的热点新闻,...

如何在 WordPress 放上 Google AdSense 广告 - 为网站增加被动收入

当我们经营 WordPress 一段时间之後,许多朋友透过 Google 搜寻或是 FB 或其他社群...