Vue绑定Style和Class写法
vue2写法
<!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="../js/vue.js"></script>
<style>
.aa {
background: green;
}
.bb {
background: yellow;
}
.cc {
background: pink;
}
.dd {
background: blue;
}
</style>
</head>
<body>
<div id="app">
<div :class="classobj">class绑定对象</div>
<div :class="classarr">class绑定数组</div>
<div :style="styleobj">style绑定对象</div>
<div :style="stylearr">style绑定数组</div>
</div>
<script>
var vm = new Vue({
data: {
classobj: {
aa: true,
bb: true,
cc: false,
},
classarr: ['aa', 'bb'],
styleobj: {
backgroundColor: 'red',
},
stylearr: [{ backgroundColor: 'green' }],
},
}).$mount('#app');
// Vue.set(对象,属性,属性值) 例如：Vue.set(vm.classobj,dd,true)
// vm.classarr.push('dd')
// vm.stylearr.push({fontSize:'20px'})
</script>
</body>
</html>
vue3
<!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="../js/vue.global.js"></script>
</head>
<style>
.aa {
background: green;
}
.bb {
background: yellow;
}
.cc {
background: pink;
}
.dd {
background: blue;
}
</style>
<body>
<div id="app">
{{name}}
<div :class="classobj">动态切换class-对象写法</div>
<button @click="addClass">addClass</button>
</div>
<script>
var obj = {
data() {
return {
name: 'ly',
classobj: {
aa: true,
bb: true,
cc: false,
},
};
},
methods: {
addClass() {
this.classobj.dd = true;
},
},
};
const app = Vue.createApp(obj).mount('#app');
</script>
</body>
</html>
Vue绑定Style和Class写法的更多相关文章
- VUE 绑定背景图片的写法
<div v-bind:style='{"background-image":"url("+imgUrl+")"}' >< ...
- 黑马vue---17、vue中通过属性绑定绑定style行内样式
黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...
- vue绑定属性、绑定class及绑定style
1.绑定属性 v-bind 或者 : 例如:<img :src="pic_src" /> <template> <div id="app& ...
- 【Vue】style和class 列表渲染 使用v-for进行循环 监控失效 双向数据绑定 过滤案例 事件修饰符
目录 昨日回顾 style和class class属性的三种设置方法 style属性的三种设置方法 条件渲染 列表渲染 使用v-for进行循环 循环数字 循环字符串 循环对象 循环数组 标签key值加 ...
- vue 绑定样式的几种方式
vue 绑定样式 对象语法 1.v-bind:class设置一个对象,动态切换class <div :class="{'active':isActive}">xxx&l ...
- vue2.* 绑定属性 绑定Class 绑定style 03
<template> <div id="app"> <!-- 绑定属性 --> <div v-bind:title="title ...
- NO.04--我的使用心得之使用vue绑定class名
今天聊一聊这个话题,其实方式有很多种,我今天介绍几种我使用到的,各位看官耐心看: 一.用 变量形式 绑定单个 Class 名 在 vue 中绑定单个 class 名还好说,直接写就可以了 <te ...
- $Django 路飞之小知识回顾,Vue之样式element-ui,Vue绑定图片--mounted页面挂载--路由携带参数
一 小知识回顾 1 级联删除问题 2 一张表关联多个表,比如有manytomanyfileds forignkey,基于对象查询存在的问题:反向查询的时候 表名小写_set.all()不知是哪个字段 ...
- 练习vue(class,style属性)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 深入理解VUE样式style层次分析
刚开始使用vue的时候容易被里面的样式搞懵: 样式可以在main.js中引入,在模块js文件中引入,在组件中的style标签引入,在组件中的script标签引入,还可以在index.html的body ...
随机推荐
- MySQL InnoDB 是怎么使用 B+ 树存数据的？
这里限定 MySQL InnoDB 存储引擎来进行阐述,避免不必要的阅读歧义. 首先通过一篇文章简要了解下 B 树的相关知识:你好,我是B树 . B+ 树是在 B 树基础上的变种,主要区别包括: 1. ...
- datetime获取当前日期前十二个月份
from dateutil.parser import parse from dateutil.relativedelta import relativedelta # 当前日期前十二个月 time_ ...
- 关闭k8s的pod时减小对服务的影响
在应用程序的整个生命周期中,正在运行的 pod 会由于多种原因而终止.在某些情况下,Kubernetes 会因用户输入(例如更新或删除 Deployment 时)而终止 pod.在其他情况下,Kube ...
- iOS MDM HeadFirst
引言 Apple MDM (Mobile Device Management) 字面理解就是一种管理移动设备的方式,覆盖 iOS 5 及更高版本的 iPhone/iPod touch/iPad.Mac ...
- CVE-2018-8120 漏洞复现
CVE-2018-8120 漏洞复现 漏洞描述 win32k.sys中函数 SetImeInfoEx未对指针进行合法性检查,从而导致一个任意地址写. 漏洞分析 漏洞成因 int __stdcall S ...
- Redis漏洞总结--未授权--沙箱绕过--(CNVD-2015-07557)&&(CNVD-2019-21763)&&(CVE-2022-0543)
Redis未授权--沙箱绕过--(CNVD-2015-07557)&&(CNVD-2019-21763)&&(CVE-2022-0543) 环境复现 采用Vulfocu ...
- 炫酷转换：Java实现Excel转换为图片的方法
摘要:本文由葡萄城技术团队原创并首发.转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 前言 在实际开发过程中,经常会有这样的需求:将Excel表格或特定区域 ...
- Caused by: liquibase.exception.ValidationFailedException: Validation Failed:1 change sets check sum
db/changelog/mysql/changelog-0001-307096-1.0.sql::1.0::buoluo.meng was: 8:a5d8f616a121230c204fd2b878 ...
- js排序算法--冒泡排序
<!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...
- 入门篇-其之六-Java运算符（中）
祝所有程序员,1024节日快乐!!! 一.自增/自减运算符 假设有一个变量intValue的值为10,如果想让这个值加1,有哪些方式? 首先,我们可以使用最原始的方式: int intValue = ...