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 ...
随机推荐
- .NET 操作 TDengine .NET ORM
TDengine 是国内比较流的时序库之一,支持群集并且免费,在.NET中资料比较少,这篇文章主要介绍SqlSugar ORM来操作TDengine 优点: 1.SqlSugar支持ADO.NET操作 ...
- Codeforces Round #576 (Div. 2)
A - City Day 题意:给n,x,y和数组a[n],求最小的下标d,使得有a[d-x,d-x+1,--d-1,d+1,d-1,d+1,--d+y-1,d+y]都比a[d]小,若d-x<= ...
- [译]这几个CSS小技巧，你知道吗？
前言 在网页设计和前端开发中,CSS属性是非常重要的一部分.掌握常用的CSS属性不仅可以使你的网页看起来更美观,还能提升用户体验,今天小编为大家介绍8个常见的CSS小技巧: 1.修改滚动条样式 下图是 ...
- Python socket实现ftp文件下载服务
简要 使用Python socket和多线程实现一个FTP服务下载.下面的示例是固定下载某一个任意格式文件. 仅仅为了展示如果使用socket和多线程进行文件下载 服务端代码 import socke ...
- WebKit Insie: Active 样式表
WebKit Inside: CSS 样式表的匹配时机介绍了当 HTML 页面有不同 CSS 样式表引入时,CSS 样式表开始匹配的时机.后续文章继续介绍 CSS 样式表的匹配过程,但是在匹配之前,首 ...
- C转C++ 个人总结
# C转C++ 个人总结 1.使用C++的好处 2.using namespace std 3.cin和cout #include<iostream> //必备的头文件 using nam ...
- 在 Linux 环境（Ubuntu）下安装 Slurm 和 OpenMPI
安装 Slurm 从软件源安装 slurm-wlm(每个节点都需要装的执行工具).slurm-client(客户机装的提交命令的工具).munge(节点间通信插件) sudo apt install ...
- Go函数介绍与一等公民
Go函数介绍与一等公民 函数对应的英文单词是 Function,Function 这个单词原本是功能.职责的意思.编程语言使用 Function 这个单词,表示将一个大问题分解后而形成的.若干具有特定 ...
- Spring ---三种注入方式
循环依赖这个问题,按理说我们在日常的程序设计中应该避免,其实这个本来也是能够避免的.不过由于总总原因,我们可能还是会遇到一些循环依赖的问题,特别是在面试的过程中,面试考察循环依赖,主要是想考察候选人对 ...
- 对 List 列表中的数据按指定字段进行排序
/** * 对列表中的数据按指定字段进行排序.要求类必须有相关的方法返回字符串.整型.日期等值以进行比较. * * @param list 集合 * @param sortName 需要排序的字段,目 ...