网站留言发送到qq邮箱,成都网站建设服务公司,建设银行积分网站,个人博客免费模板在应用界面中#xff0c;某些元素的样式是动态的。class 与 style 绑定就是专门用来实现动态样式效果的技术。
如果需要动态绑定 class 或 style 样式#xff0c;可以使用 v-bind 绑定。 绑定 class 样式【字符串写法】
适用于#xff1a;类名不确定#xff0c;需要动态指…在应用界面中某些元素的样式是动态的。class 与 style 绑定就是专门用来实现动态样式效果的技术。
如果需要动态绑定 class 或 style 样式可以使用 v-bind 绑定。 绑定 class 样式【字符串写法】
适用于类名不确定需要动态指定。
.box{width: 100px;height: 100px;
}
.aqua{background-color: aqua;
}
.red{background-color: red;
}
div idAPPdiv classbox :classback clicktoggleBack点击变成红色/div
/div
注第二个 class 使用的是 v-bind 简写的方式 :class 。
const vm new Vue({el: #APP,data(){return {back:aqua}},methods:{toggleBack(){this.back red;}}
});
点击前 点击后 绑定 class 样式【数组写法】
适用于要绑定多个样式个数不确定名字也不确定。
.box{width: 100px;height: 100px;
}
.aqua{background-color: aqua;
}
.border{border: 20px solid red;
}
.radius{border-radius: 25px;
}
div idAPPdiv classbox :classclassArr多个class样式/div
/div
const vm new Vue({el: #APP,data(){return {classArr:[aqua,border,radius]}}
}); 如果要绑定多个样式个数确定但是名字不确定也可以使用以下写法
div idAPPdiv classbox :class[a,b,c]多个class样式/div
/div
const vm new Vue({el: #APP,data(){return {a: aqua,b: border,c: radius}}
});
注效果与上边的示例相同a、b、c 都是变量控制是否使用某个 class 样式。 原创作者吴小糖
创作时间2023.10.13
