<!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
104
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
vue的class和style动态绑定
目录
相关文章
|
1天前
|
缓存
JavaScript
|
1天前
|
JavaScript
|
1天前
|
缓存
JavaScript
|
1天前
|
JavaScript
|
1天前
|
JavaScript
|
前端开发
JavaScript
|
Web App开发
前端开发
JavaScript
Vue.js Class与Style绑定
887
0
0
|
前端开发
JavaScript
vue中class与style的绑定
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ，我们可以用v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。
1932
0
0
|
JavaScript
Vue.js之Class 与 Style 绑定
数组语法：
我们可以把一个数组传给 v-bind:class ，以应用一个 class 列表：
wo
data: {
activeClass: 'active',
err...
773
0
0
|
4天前
|
JavaScript
热门文章
最新文章
1
vite 如何做到让 vue 本地开发更快速？
2
VS Code书写vue项目配置 eslint+prettier 统一代码风格
3
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
4
开箱即用的Vite-Vue3工程化项目模板
5
React craco 详细使用与介绍（类似 Vue 外抛的 vue.config.js）
6
如何写一手漂亮的 Vue
7
vue中手机号码+座机号码、邮箱正则校验规则封装
8
【轻松入门vue】vue前后端交互
9
VUE element-ui之form表单中input输入超过规定长度error提醒，并实时显示输入长度，可无限输入
10
vue加载地图，在tab切换到其他页面再切换回来的时候，地图不显示了
1
Vue3中的Suspense组件有什么用？
43
2
浅谈Vue.js的计算属性computed
59
3
Vue3基础之v-if条件与 v-for循环
79
4
Vue3基础之v-bind与v-on
91
5
Vue3中定义变量是选择ref还是reactive？
63
6
探索Vue.js：从基础到进阶
35
7
使用Vue.js构建交互式前端的技术探索
64
8
ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
120
9
vue2升级到vue3的一些使用注意事项记录(四）
92
10
ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
108