以为昨天就这样结束了吗?并没有!!今天接着昨天继续讲~主要会提到的是 「Attribute」和 「使用JavaScript表达式」这两个部分。一起来看看呗~!
Mustache语法不能作用在HTML Attribute(属性)上
如果想要为HTML标签绑定它所具有的attribute,vue.js为我们提供v-bind
指令来达成这个目的。
那要如何使用咧? 他的格式是v-bind:属性=”变量”
这样就可以动态绑定HTML标签的attribute。直接来个范例
这边我们绑定的属性是class,而变量则是color,并且对这个变量给予一个值green
接着看看结果和控制台的部分
显示结果
控制台
可以发现”别怀疑”并没有变成绿色,那是因为我们还没声明green样式,但是,从控制台可以看到class对应的属性值是green。
再来就直接声明green的样式,并看看结果吧~!!
显示结果
“别怀疑”成功变绿色了,当然,也可以增加很多不同的样式,像是想要增加一个让字体变蓝色样式的话,我们就可以这样做。
新增一个名字叫blue的样式
然後记得color这个地方要记得改,这样就完成了欧~
到目前为止的所有例子中,我们只绑定简单的属性,但其实vue.js提供了完整的JavaScript表达式。像是
如果number等於1,输出的结果就会是2
显示结果
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 标签穿上行内样式
https://bootstrap5.hexschool.com/docs/5.1/getting-...
今天要来对 function 来做深入一点的介绍。 如果想要把 function 存在变数里,可以对...
挑战目标: MockNative Camp 这次的挑战应该就止步於此了,在前端上我太弱小LA,没有事...
作法 定义好单一元件 (template+区域样式),在画面内引入元件,并根据需求再做调整如:样板回...
今天突然的好累QQ 所以来个半偷懒篇(?! 之前在写数位监识,或是资安稽核,还有其他文章时, 都会想...