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

以为昨天就这样结束了吗?并没有!!今天接着昨天继续讲~主要会提到的是 「Attribute」和 「使用JavaScript表达式」这两个部分。一起来看看呗~!

Attribute

Mustache语法不能作用在HTML Attribute(属性)上

v-bind

如果想要为HTML标签绑定它所具有的attribute,vue.js为我们提供v-bind指令来达成这个目的。

那要如何使用咧? 他的格式是v-bind:属性=”变量”这样就可以动态绑定HTML标签的attribute。直接来个范例
这边我们绑定的属性是class,而变量则是color,并且对这个变量给予一个值green
https://ithelp.ithome.com.tw/upload/images/20210922/20139392BZL4QuQPw4.png
接着看看结果和控制台的部分
显示结果
https://ithelp.ithome.com.tw/upload/images/20210922/20139392UNBLItuvmJ.png
控制台
https://ithelp.ithome.com.tw/upload/images/20210922/201393925JQmITLCvB.png
可以发现”别怀疑”并没有变成绿色,那是因为我们还没声明green样式,但是,从控制台可以看到class对应的属性值是green。
再来就直接声明green的样式,并看看结果吧~!!
https://ithelp.ithome.com.tw/upload/images/20210922/20139392UqDvamF92K.png
显示结果
https://ithelp.ithome.com.tw/upload/images/20210922/20139392MWPuEgNRIG.png
“别怀疑”成功变绿色了,当然,也可以增加很多不同的样式,像是想要增加一个让字体变蓝色样式的话,我们就可以这样做。

新增一个名字叫blue的样式
https://ithelp.ithome.com.tw/upload/images/20210922/20139392VtmHHSiGR1.png
然後记得color这个地方要记得改,这样就完成了欧~
https://ithelp.ithome.com.tw/upload/images/20210922/20139392rkRRoKSeXK.png

使用JavaScript表达式

到目前为止的所有例子中,我们只绑定简单的属性,但其实vue.js提供了完整的JavaScript表达式。像是

{{number + 1}}

如果number等於1,输出的结果就会是2
https://ithelp.ithome.com.tw/upload/images/20210922/20139392FyxXjT0SZf.png
显示结果
https://ithelp.ithome.com.tw/upload/images/20210922/20139392xHyV9vEVml.png

{{ ok ? 'YES' : 'NO' }}

ok的部分是一个变量或是一个条件运算的结果,它更支持的是一种比较结果,比较结果为真的时候执行?後面的代码,为false的时候执行:後面的代码。
{{1==3 ? ‘YES’: ‘NO’}}执行的结果就会是NO

复杂的函数运算

直接来个例子{{ message.split('').reverse().join('') }},这个函式是指
先将message拆解成一个一个的字母,然後将字母倒叙,最後在拼凑起来
Cute -> C、u、t、e -> e、t、u、C -> etuC

结语

插值的部分就到今天结束!明天会讲什麽咧ヽ(✿゚▽゚)ノ,别妄想我会告诉你们ˋ( ° ▽、° )


<<:  [Day 8] 阿嬷都看得懂的替 HTML 标签穿上行内样式

>>:  Day17 购物车 -- 进阶应用

Vue3 使用 Bs5 、 Jq 、 gsap

https://bootstrap5.hexschool.com/docs/5.1/getting-...

Day 7 Functions

今天要来对 function 来做深入一点的介绍。 如果想要把 function 存在变数里,可以对...

[Day 18]所以我说那个酱汁呢(前端篇)

挑战目标: MockNative Camp 这次的挑战应该就止步於此了,在前端上我太弱小LA,没有事...

【Vue】帮卡片式排版加上假资料 |components v-for & data

作法 定义好单一元件 (template+区域样式),在画面内引入元件,并根据需求再做调整如:样板回...

资安事件回应篇

今天突然的好累QQ 所以来个半偷懒篇(?! 之前在写数位监识,或是资安稽核,还有其他文章时, 都会想...