iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Modern Web

是vue不是view系列 第 16

[Day 16] v-text和v-html

  • 分享至 

  • xImage
  •  

A new day!!今天要來講的內容比較簡單,篇幅甚至有點短ヽ(✿゚▽゚)ノ,但知識量可不會減少喔~
在前幾天有稍微的提過v-html不知道各位還記不記得,不記得也沒關係,因為我也忘記了( ̄︶ ̄),現在就讓我們重新認識v-textv-html吧!!

v-text

v-text可以把data內屬性的資料變成純文本,其實就很像雙大括號的用法,直接來看看例子吧~~
https://ithelp.ithome.com.tw/upload/images/20210928/20139392x6DysE86Dk.png
https://ithelp.ithome.com.tw/upload/images/20210928/20139392a7R3P0kHtd.png
'想睡覺'是使用雙大括號的用法,'我想睡覺了'是使用v-text的用法。
可以看到使用雙大括號的結果和v-text的結果是一樣的!!

v-html

前幾天就已經提過了,今天再講一次絕對不是為了混過一天!是為了讓大家更加熟悉,其實v-htmlv-text相似,但v-html可以輸出HTML代碼,來看看例子
https://ithelp.ithome.com.tw/upload/images/20210928/201393929vsKl2xOTc.png
https://ithelp.ithome.com.tw/upload/images/20210928/20139392bEcqO5CwP7.png
{{msg}}的內容改成<span>想睡覺</span>
觀察下來發現可以用在v-html的東西在v-text卻不能用,v-text會直接把HTML印出來,而v-html則不會。

結語

很豐富的一篇吧!!打這篇的時候很想睡覺,例子不知不覺都變成想睡覺了-O-


上一篇
[Day 15] v-bind綁定class和style
下一篇
[Day 17] v-model雙向綁定是什麼咧??
系列文
是vue不是view30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
ㄆㄩ
iT邦新手 4 級 ‧ 2021-09-30 23:00:04

我也一直好想睡覺/images/emoticon/emoticon70.gif

罷告 iT邦新手 5 級 ‧ 2021-10-05 14:31:19 檢舉

你可以來我家睡,我為你鋪一張床了/images/emoticon/emoticon24.gif

我要留言

立即登入留言