<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="vue.global.js"></script>
</head>
<style>
.box1 {
background-color: red;
color: #ffffff;
}
.box2 {
font-weight: bold;
font-weight: 800;
}
</style>
<body>
<div id="app">
<div :class="myclass">你好</div>
<div :style="mystyle">你好</div>
</div>
<script>
let vm = Vue.createApp({
data() {
return {
// myclass: "box1 box2",
// myclass: ['box1', 'box2'],
// myclass: { box1: true, box2: true },
// style书写
// mystyle:'background:blue;color:#fff',
// mystyle:['background:blue','color:#fff']
mystyle: { background: "blue", color: "#fff" },
};
},
}).mount("#app");
setTimeout(() => {
// vm.myclass.pop()//修改class数组的形式
// vm.myclass.box1 = false;修改class为对象的形式
// vm.mystyle.push('width:300px')修改style为数组的形式
vm.mystyle.color = "black";//修改style为对象的形式
}, 2000);
</script>
</body>
</html>
vue的class和style动态绑定
2023-01-09
118
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
vue的class和style动态绑定
目录
相关文章
|
16天前
|
JavaScript
|
27天前
|
JavaScript
关系型数据库
MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统，提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性，实现用户友好的界面，方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构，确保稳定性和多功能模块设计，涵盖管理员和用户功能模块，促进物品循环使用，降低开销，提升环保意识，助力绿色校园文化建设。
159
17
17
|
2月前
|
JavaScript
前端开发
开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
54
1
1
|
2月前
|
JavaScript
前端开发
索引
vue学习第三章
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令，包括基本使用、动态绑定class及style等，希望能为你的前端学习之路提供帮助。持续关注，更多精彩内容即将呈现！🎉🎉🎉
50
1
1
|
2月前
|
存储
JavaScript
前端开发
|
2月前
|
JavaScript
API
开发者
|
2月前
|
JavaScript
前端开发
开发者
|
2月前
|
JavaScript
前端开发
API
|
2月前
|
JavaScript
前端开发
开发者
vue 数据驱动视图
总之，Vue 数据驱动视图是一种先进的理念和技术，它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性，开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中，数据驱动视图将继续发挥重要作用，推动着应用界面的不断创新和进化。
41
2
2
|
2月前
|
JavaScript
前端开发
开发者
热门文章
最新文章
1
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
2
vue使用iconfont图标
3
vue3使用pinia中的actions，需要调用接口的话
4
Figma-Low-Code：快速将Figma设计转换为Vue.js应用，支持低代码渲染、数据绑定
5
【Vue.js】监听器功能（EventListener）的实际应用【合集】
6
VS Code书写vue项目配置 eslint+prettier 统一代码风格
7
VUE练习题【详解】
8
vue3.0 router路由跳转传参（router.push）
9
关于vue项目本地localhost可以正常访问项目，ip却无法访问项目的解决办法
10
「后端小伙伴来学前端了」Vue集成 Element-tiptap 富文本编辑器
1
【Vue.js】监听器功能（EventListener）的实际应用【合集】
27
2
Figma-Low-Code：快速将Figma设计转换为Vue.js应用，支持低代码渲染、数据绑定
44
3
vue使用iconfont图标
89
4
vue3使用pinia中的actions，需要调用接口的话
79
5
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
159
6
除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
48
7
Vue3中使用provide/inject来避免v-model的循环引用
53
8
Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
49
9
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
160
10
在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
74