浅谈Angular10中class和style绑定-木庄网络博客

2022-02-20 08:09:45 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者青灯夜游，侵删。

本篇文章给大家介绍一下Angular中class和style绑定。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

绑定类型	语法	输入类型	输入值范例
单个类绑定	[class.foo]=‘flag’	boolean\|undefined\|null	true,false
多个类绑定	[class]=‘classExpr’	string {[key:string]:boolean \| undefined \| null} Array < string>	‘my-class1 my-class2’ {foo: true, bar: false} [‘foo’,‘bar’]

1、基本语法

1 2	`<p [class.p-box]='flag'>` `<button (click)='changeFlag()'>修改flag的值</button></p>`

2、当表达式的值为真的时候，Angular就会加上这个类，为假的时候就会移除

1 2	`flag = truechangeFlag():void {` `this.flag = !this.flag}`

3、当flag为真的时候
在这里插入图片描述

4、当flag为假的时候
在这里插入图片描述

1、字符串的形式

1	`<p [class]='classExpr'>绑定字符串的class</p>`

1	`classExpr:string =` `'class-expr1 class-expr2 class-expr3'`

2、绑定结果

在这里插入图片描述

1、对象的形式

1	`<p [class]='classExpr'>绑定对象形式的class</p>`

classExpr:object = {
    'foo': true,
    'bar': false}

2、绑定结果

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者